微信小程序 - 表单验证插件WxValidate使用

Github地址：WxValidate

 

 

 

 

1. 拷贝至util目录

 

2.项目引入

 

3.查看wxml匹配规则，通过name

 

 

 4.在js配置规则

 

import WxValidate from '../../../utils/WxValidate';  2 
Page({  4 
  /**  6  * 页面的初始数据  7    */
 data: {},  9 
  onLoad: function(options) {  11 
    /**  13  * 4-1(先初始化表单)  14      */
    this.initValidate();  16  },  17 


 showModal(error) {  21  wx.showModal({  22  content: error.msg,  23       showCancel: false,  24  })  25  },  26 

 submitForm(e) {  29     /**  30  * 4-3(表单提交校验)  31      */
    const params = e.detail.value  33     if (!this.WxValidate.checkForm(params)) {  34       const error = this.WxValidate.errorList[0]  35       this.showModal(error)  36       return false
 }  38     /**  39  * 这里添写验证成功以后的逻辑  40  *  41      */
    //验证通过以后->
    this.submitInfo(params);  44  },  45 
  /**  47  * 表单-提交  48    */
 submitInfo(params) {  50     // form提交
    let form = params;  52     console.log('将要提交的表单信息：', form);  53 
 wx.showToast({  55       title: '提交成功！！！！',  56  })  57  },  58 
  /**  60  * 表单-验证字段  61    */
 initValidate() {  63 
    /**  65  * 4-2(配置规则)  66      */
    const rules = {  68  name: {  69         required: true,  70         rangelength: [2, 4]  71  },  72  idcard: {  73         required: true,  74         idcard: true,  75  },  76  tel: {  77         required: true,  78         tel: true,  79  },  80       // 配置false可关闭验证
 regcode: {  82         required: false,  83         minlength: 6
 },  85  assistance: {  86         required: true,  87         assistance: true,  88  },  89  }  90     // 验证字段的提示信息，若不传则调用默认的信息
    const messages = {  92  name: {  93         required: '请输入姓名',  94         rangelength: '请输入2~4个汉字个汉字'
 },  96  tel: {  97         required: '请输入11位手机号码',  98         tel: '请输入正确的手机号码',  99  }, 100  idcard: { 101         required: '请输入身份证号码', 102         idcard: '请输入正确的身份证号码', 103  }, 104  regcode: { 105         required: '请输入验证码', 106         minlength: '请输入正确的验证码'
 }, 108  assistance: { 109         required: '请勾选 《顺风男服务协议》'
 }, 111  } 112     // 创建实例对象
    this.WxValidate = new WxValidate(rules, messages) 114     /** 115  * 也可以自定义验证规则 116      */
    this.WxValidate.addMethod('assistance', (value, param) => { 118       return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2) 119     }, '请勾选 《顺风男服务协议》') 120  } 121 });

 

 

5.wxml

<form bindsubmit='submitForm'>
  <view class="container">
    <view class='container-info'>
      <view class="man-form-info">
        <view class='name'>姓名  6           <input placeholder='请输入姓名' name="name"></input>
        </view>
        <view class='idcard'>
 身份证号码 10           <input maxlength='18' placeholder='请输入身份证号码' type='idcard' name="idcard"></input>
        </view>

        <view class='phone'>
 手机号码 15           <input maxlength='11' placeholder='请输入手机号码' type='number' bindinput="phoneValue" name="tel"></input>
        </view>
      </view>
    </view>

    <view class='read-man-pact'>
      <checkbox-group name="assistance">
        <checkbox></checkbox>
        <navigator class='pact'>阅读《顺风男服务协议》</navigator>
      </checkbox-group>
    </view>

    <view class='submit-form-info'>
      <button form-type='submit'>提交</button>
    </view>

  </view>
</form>

 

wxss

page {
 font-size: 30rpx;
}

input:hover {
 border-bottom: 2px solid #ddd;
}

button:active {
 opacity: 0.7;
}

.container-info {
 padding: 5%;
}

.man-form-info {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.man-form-info .name, .man-form-info .idcard, .man-form-info .phone,  24 .man-form-info .regcode {
 display: flex;
 width: 100%;
 flex-wrap: wrap;
 margin-top: 2%;
}

.man-form-info input {
 width: 100%;
 border-bottom: 1px solid #ddd;
}

.regcode {
 position: relative;
}

.regcode button {
 border-radius: 10rpx;
 background-color: #3879d9;
 color: #fff;
 height: 54rpx;
 line-height: 54rpx;
 font-size: 23rpx;
 width: 300rpx;
 margin-top: -2%;
}

.regcode input {
 width: 100%;
}

.code {
 position: relative;
 width: 100%;
}

.code button {
 position: absolute;
 top: 72rpx;
 right: 0;
}

.self-idcard-info {
 margin-top: 15%;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 width: 100%;
 border: 1px dashed #ddd;
 padding: 2%;
}

.f-center {
 width: 100%;
 display: flex;
 justify-content: center;
}

.picture_list {
 padding: 0 7%;
}

.add-image {
 background-color: #ddd;
 color: #fff;
}

.upload_progress {
 width: 167rpx;
 height: 164rpx;
}

.apply {
 width: 96%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 2%;
 border-top: 2px solid #ddd;
 border-bottom: 2px solid #ddd;
}

.apply-deposit {
 font-weight: bold;
}

.apply-deposit-amount {
 font-weight: bold;
 color: #fdd20c;
}

.apply button {
 margin: 0;
 padding: 0;
 width: 240rpx;
 height: 60rpx;
 line-height: 60rpx;
 color: #fff;
 background-color: #fdd20c;
}

.read-man-pact {
 display: flex;
 justify-content: center;
 padding: 2%;
}

.read-man-pact checkbox-group {
 display: flex;
 align-items: center;
}

.pact {
 border-bottom: 1px solid #ddd;
}

.submit-form-info {
 display: flex;
 justify-content: center;
}

.submit-form-info button {
 background-color: #fdd000;
 width: 80%;
 margin: 3% 0;
}

 

 

效果图（拷贝上面的代码即可运行）