在做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个属性和一个特定的样式关键字。

二.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();然后在提交的操作里加上判断即可。例如下图的效果。

三、验证关键字

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

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

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