微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装（一）

在做web开发时，表单验证插件我们前端用的是jqueryValidate，由于个人主要精力是在后台JAVA开发上，为了让插件与后台更好的结合和使用，通过JAVA的自定义组件将表单全部重新写了一边，同时把jqueryValidate做了再次封装，新增了一些新的常用判断，也修改了一些关键字。

小程序同样也存在验证的问题，在网上搜索了一下，目前用的比较多的是WxValidate，下载地址和用法如下

github: https://github.com/skyvow/wx-extend

但是这个插件用起来比较麻烦，js要写很多的预设代码，所以本人又在此插件的基础上做了再次封装。

接下来直接说用法，以不为空（notEmpty）和长度（size）为例。

一、wxml文件

1.  
   <form bindsubmit="formSubmit">
2.  
   <view class="wide-info">
3.  
   <view class="wide-info-list">
4.  
   <!--姓名-->
5.  
   <view class="info-list">
6.  
   <view class="info-list-1eft">
7.  
   <text class="notEmptyClass">姓名 </text>
8.  
   </view>
9.  
   <view class="info-list-right">
10.  
    <input id="name" name='name' placeholder='请输入' value='{{form.name}}' class="wxValidate inputName"
11.  
    data-validate= "notEmpty|size[4,10]" data-fieldname= "姓名"/>
12.  
    </view>
13.  
    </view>
14.  
     
15.  
    <!--密码-->
16.  
    <view class="info-list">
17.  
    <view class="info-list-1eft dark">
18.  
    <text class="notEmptyClass">密码 </text>
19.  
    </view>
20.  
    <view class="info-list-right">
21.  
    <input type="text" id="password" name="password" placeholder='请输入' value='{{form.age}}' class="wxValidate inputName"
22.  
    data-fieldname= "密码" data-validate= "notEmpty"/>
23.  
    </view>
24.  
    </view>
25.  
    <view class="info-list">
26.  
    <view class="info-list-1eft dark">
27.  
    <text class="notEmptyClass">重复密码 </text>
28.  
    </view>
29.  
    <view class="info-list-right">
30.  
    <input type="text" id="cfpassword" name="cfpassword" placeholder='请输入' value='{{form.age}}' class="wxValidate inputName"
31.  
    data-fieldname= "重复密码" data-validate= "notEmpty|equals[password]"/>
32.  
    </view>
33.  
    </view>
34.  
     
35.  
    <!--年龄-->
36.  
    <view class="info-list">
37.  
    <view class="info-list-1eft dark">
38.  
    <text class="notEmptyClass">年龄 </text>
39.  
    </view>
40.  
    <view class="info-list-right">
41.  
    <input type="text" id="age" name="age" placeholder='请输入' value='{{form.age}}' class="wxValidate inputName"
42.  
    data-fieldname= "年龄" data-validate= "notEmpty|int|range[18,60]"/>
43.  
    </view>
44.  
    </view>
45.  
     
46.  
    </view>
47.  
     
48.  
    </view>
49.  
    <!--按钮--->
50.  
    <view class="buttons-kind">
51.  
    <button class="fabu" form-type="submit">发布 </button>
52.  
    </view>
53.  
    </form>

  重点：每一个表单控件必须有3个属性和一个特定的样式关键字。

属性	说明
id	表单控件的ID
data-validate	需要做相关验证的关键字，多种验证用‘|’隔开，例如上面的姓名要验证不为空同时长度在4-10个字符： data-validate="notEmpty|size[4,10]"
data-fieldname	当出现错误时，显示在错误提示中的表单名称。

 

样式	说明
wxValidate	代表此表单控件要做相关验证，必须写。

 

二.js文件

1.  
   import WxValidate from '../../utils/WxValidate.js'
2.  
   const util = require( '../../utils/util.js')
3.  
   Page({
4.  
   /**
5.  
   * 页面的初始数据
6.  
   */
7.  
   data: {
8.  
   date: ""
9.  
   },
10.  
     
11.  
    /**
12.  
    * 生命周期函数--监听页面加载
13.  
    */
14.  
    onLoad: function (options) {
15.  
     
16.  
    },
17.  
    /**
18.  
    * 生命周期函数--监听页面初次渲染完成
19.  
    */
20.  
    onReady: function () {
21.  
    //验证方法
22.  
    this.WxValidate = new WxValidate();
23.  
    },
24.  
    bindDateChange : function(e){
25.  
    this.setData({ date:e.detail.value})
26.  
    },
27.  
    /***调用验证函数***/
28.  
    formSubmit: function (e) {
29.  
    console.log( 'form发生了submit事件，携带的数据为：', e.detail.value)
30.  
    const params = e.detail.value
31.  
    e.detail.value.osscation_address = this.data.osscation_address
32.  
    e.detail.value.date = this.data.date
33.  
    console.log(e.detail.value)
34.  
    console.log( this.WxValidate.rules)
35.  
    console.log( this.WxValidate.messages)
36.  
    //校验表单
37.  
    if (! this.WxValidate.checkForm(params)) {
38.  
    const error = this.WxValidate.errorList[ 0]
39.  
    util.alert( "错误提示",error.msg)
40.  
    return false
41.  
    }
42.  
    //向后台发送时数据 wx.request...
43.  
    util.alert( "成功提示", '提交成功 :' + e.detail.value.date)
44.  
    }
45.  
     
46.  
    })

  重点： 此页面只要在渲染完的方法里new WxValidate();然后在提交的操作里加上判断即可。例如下图的效果。

 

三、验证关键字

关键字	说明	用法
notEmpty	不能为空
size[4,10]	输入字符的长度	可以只写一个数字，注意根据判断的不同，判断要不要写“，”。例如 长度最小为4则可写成：size[4]; 长度最大为10则可写成：size[,10]，注意逗号不能少;
int	整数
number	数字
range[18,60]	数值的范围	类似与size，但此关键字还多一种判断，例如是不包含首尾的数值，例如 薪酬必须大于5000 小于等于20000： range(5000,20000]； 或者年龄必须18-60之间，但不包含18岁和60岁：range(18,60)
equals[id]	等于另一个表单的值	id:表示另一个控件的id，此处也可以写成： equals[id,另一个控件的名称]格式，例如：equals[id,手机号] “输入值必须和【手机号】相同！”；若后面的名称不填写，则验证出错时默认提示的是“请输入与上面相同的密码”
tel	电话格式（中国大陆）
phone	手机格式（中国大陆）
idcard	身份证（中国大陆）
date	日期
dateISO	日期（ISO），例如：2009-06-23，1998/01/22
email	邮箱地址
url	网站地址

 PS：这个控件最终应该还是要和wx.request 封装到一起使用，具体等我把wx.request封装好了再写了。    

插件下载：https://github.com/zhuiyue82/wx     

                      

 本人在CSDN的本文链接：https://blog.csdn.net/zhuiyue82/article/details/100012973

    

 

转载于:https://www.cnblogs.com/zhuiyue82/p/11451338.html