微信小程序实现表单校验功能


Posted in Javascript onMarch 30, 2020

小程序SDK版本 1.4

表单校验之难

如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一。原因如下:

表单组件在数量上达到11个,居各类组件之首。当然幸运的是,并不是所有的都需要校验。
而这些组件操作方式多样,可分为滑动、(多行)输入、点击、点击+滑动。
即使是同一个组件,因为业务场景不同就会有不同的校验规则。
更麻烦的是,这些组件之间经常还会联动或者关联校验。

但是,作为一个非简单静态页面,有着较多用户交互的小程序,表单校验又是一个非常常用的功能:登录、注册、新增、编辑…

总而言之:表单组件的多样性 X 校验规则的多样性 = 复杂的公共业务

这么棘手的问题我们怎么来解决它呢?

尝试组件化

如果你关注近年前端发展趋势,一定会想到“组件化”来实现:

把每个表单组件的视图、样式、校验逻辑封装成单独的业务组件,然后直接调用。

可事情似乎没这么简单。

如果考虑把n个原生组件抽象出来,配上n个校验规则,再乘以组件之间的关系n(的全排列),复杂度至少达到n³。

而且每个组件的校验失败或成功都要通知父组件,以便显示错误信息或者进行下一步操作。

这样不但没有解决问题,反而使得这些公用的表单组件过于复杂,耦合混乱。

尝试非组件化

既然原先的思路行不通,再来回到出发点,看看我们最核心的需要被抽象出来的是什么。

无非是两样东西:视图层的元素样式和逻辑层的校验规则。

上面说到封装原生表单组件会极大的增加复杂度,索性放弃它,复杂度瞬间可以下降到n²。

但同时我们又要保持样式统一,也就是我们常说的风格一致。

比如输入框该多高,错误提示怎么显示,字体大小颜色…之类的。

这个好办,我们把样式类写入一个公共样式文件form.wxss,然后需要的时候引入,甚至可以全局引入。

// form.wxss
.form {
 display: block;
 font-size: 28rpx;
 position: relative;
}
.form-line {
 background-color: #fff;
 border-bottom: 1px solid #e5e5e5;
 font-size: 34rpx;
 height: 96rpx;
 line-height: 96rpx;
 display: flex;
 padding: 0 31rpx;
}
.form-title {
 box-sizing: border-box;
 background-color: #efefef;
 color: #838383;
 font-size: 28rpx;
 padding: 31rpx;
 min-height: 90rpx;
}
...

我们使用的时候只需要在对应的元素上添加相应的样式即可。比如:

// xxx.wxml
<form class="form">
 <view class="form-title">请输入手机号</view>
 <view class="form-line">
 <label class="label">手机</label>
 <view class="form-control">
  <input class="f-1 va-m input" />
 </view>
 </view>
 ...
</form>

那么接下来我们只剩下校验规则和组件关联关系之间这两个难题了。

校验规则理想的状态是可扩展和可配置。

可扩展。随着业务的增长,在不修改已有规则情况可以新增校验规则。

可配置。可单独为每个表单组件配置不同的单个或多个校验规则。

如何做到可定义?用统一的形式即可。比如:

/*
统一的格式:
[规则名]: {
 rule: [校验方式]
 msg: [错误信息]
}
*/
const validators = {
 // 简单的校验用正则
 required: {
 rule: /.+/,
 msg: '必填项不能为空'
 },
 // 复杂的校验用函数
 same: {
 rule (val='', sVal='') {
  return val===this.data[sVal]
 },
 msg: '密码不一致'
 }
 ...
}

如何做到可配置?配置上支持类似数组的形式,然后用统一的函数依次读取这些校验规则,逐个校验。

配置的规则肯定是在原生表单组件上,至于组件的值也只能通过事件对象获取。

如果直接绑定事件进行校验会阻碍父页面获取值,所以最好由父页面绑定事件传值,并且传入事件对象和执行环境进行处理:

/*
校验函数部分代码
e 事件对象
context 页面对象函数执行的上下文环境
*/
let validate = (e, context) => {
 // 从事件对象中获取组件的值
 let value = (e.detail.value || '').trim()
 // 从事件中获取校验规则名称
 let validator = e.currentTarget.dataset.validator ? e.currentTarget.dataset.validator .split(',') : []
 // 遍历规则进行校验
 for (let i = 0; i < validator.length; i++) {
 let ruleName = validator[i].split('=')[0]
 let ruleValue = validator[i].split('=')[1]
 let rule = validators[ruleName].rule || /.*/
 if ('function' === typeof rule) {
  rule.call(context, value, ruleValue) ? '' : validators[ruleName].msg
 } else {
  rule.test(value) ? '' : validators[ruleName].msg
 }
 }
 ...
}

调用起来也非常简单,按照固定的格式加上对应的样式,配置校验规则,然后调用校验函数。

// 部分代码示例
// page.wxml
<form>
 <!-- 一个表单组件 -->
 <view class="form-line">
 <label class="label">授权手机</label>
 <view class="form-control">
  <!-- 校验规则:必须填写,且为电话号码 -->
  <input maxlength="11" class="f-1 va-m input" bindblur="validate" type="number" data-name="phone" data-validator="required,phone" confirm-type="next" value="{{phone}}" />
  <!-- 错误图标 -->
  <icon wx:if="{{form.phone!==undefined}}" type="{{form.phone?'warn':'success'}}" size="16" />
 </view>
 </view>
 ...
</form>
// page.js
valid(e) {
 this.setData({
 [e.currentTarget.dataset.name]: e.detail.value
 })
 validate(e, this)
}

上面的代码中省略了校验错误提示和非空校验。详细代码请查看GitHub仓库:

https://github.com/yalishizhude/miniprogram-seed.git

总结

写代码最然总是要抱着最美好的想法,但同时也要做着最坏的打算。尤其是面对一些底层框架限制的时候。

面对这种情况,我们要从核心需求出发,把能抽出公用的东西都出来,同时保证可配置、可扩展。

好的的架构师不但喜欢未开垦的处女地,也应不惧布满杂石乱草的荒野~

欢迎到评论区留言交流:https://github.com/yalishizhude/webclub-discuss/issues/1

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
理解jquery事件冒泡
Jan 03 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
如何使用angularJs
May 08 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 #Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 #Javascript
Angularjs中数据绑定的实例详解
Aug 25 #Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 #Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 #Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 #Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 #Javascript
You might like
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python 多进程队列数据处理详解
2019/12/23 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
建筑设计师岗位职责
2013/11/18 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
初一新生军训方案
2014/05/22 职场文书
代办社保委托书范文
2014/10/06 职场文书
先进员工事迹材料
2014/12/20 职场文书
地陪导游欢迎词
2015/01/26 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Python实现byte转integer
2021/06/03 Python
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电