微信小程序 - 表单验证插件WxValidate（自定义警告信息形式）

弹出的形式对于用户来说，总是不太友好的

可能会出现层级问题（只需要设置一下提示的层级即可）

WxValidate内置规则

以下代码拷贝即可使用~

wxml

 <form bindsubmit='submitCheckInfo'>

   <!-- 提示警告! -->
   <view class='wran-tips' style='{{displayWarn}}'>
     <text>{{warnInfo}}</text>
   </view>

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

         <view class='phone'>
           手机号码
           <input maxlength='11' placeholder='请输入手机号码' type='number' bindinput="phoneInput" 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>

js

 import WxValidate from '../../../utils/WxValidate';

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     // 初始化警告
     displayWarn: 'display:none'
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function(options) {
     // 校验规则 -rules
     this.initValidate();
   },

   /**
    * 表单验证->(可自定义验证形式)
    */
   showWarnInfo(error) {
     // 当前page是this对象
     let page = this;
     // 延时时间等待
     let delayTime = 1;
     // 延时等待毫秒,现设置为1000
     let delayMillsecond = 1000;
     // 调用显示警告函数
     showWran(page, error, delayTime, delayMillsecond);
   },

   /**
    * 表单-提交前的(校验)
    */
   submitCheckInfo(e) {
     const params = e.detail.value
     console.log(params)
     // 传入表单数据，调用验证方法
     if (!this.WxValidate.checkForm(params)) {
       const error = this.WxValidate.errorList[0]
       this.showWarnInfo(error)
       return false
     }
     // 验证通过以后
     this.submitForm(params);
   },

   /**
    * 表单-提交(到后端)
    */
   submitForm(params) {
     console.log(params);

     wx.showToast({
       title: '提交吧~Q!',
     })
   },

   /**
    * 表单-验证字段
    */
   initValidate() {
     const rules = {
       name: {
         required: true,
         rangelength: [2, 4]
       },
       idcard: {
         required: true,
         idcard: true,
       },
       tel: {
         required: true,
         tel: true,
       },
       regcode: {
         required: false,
         minlength: 6
       },
       assistance: {
         required: true,
         assistance: true,
       },
     }
     // 验证字段的提示信息，若不传则调用默认的信息
     const messages = {
       name: {
         required: '请输入姓名',
         rangelength: '请输入2~4个汉字个汉字'
       },
       tel: {
         required: '请输入11位手机号码',
         tel: '请输入正确的手机号码',
       },
       idcard: {
         required: '请输入身份证号码',
         idcard: '请输入正确的身份证号码',
       },
       regcode: {
         required: '请输入验证码',
         minlength: '请输入正确的验证码'
       },
       assistance: {
         required: '请勾选 《顺风男服务协议》'
       },
     }
     // 创建实例对象
     this.WxValidate = new WxValidate(rules, messages)
     // 自定义验证规则
     this.WxValidate.addMethod('assistance', (value, param) => {
       return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
     }, '请勾选 《顺风男服务协议》')
   }
 })

 /**
  * 可加入工具集-减少代码量
  */
 function showWran(page, error, delayTime, delayMillsecond) {
   let timesRun = 0;
   let interval = setInterval(function() {
     timesRun += delayTime;
     if (timesRun === delayTime) {
       clearInterval(interval);
     }
     page.setData({
       warnInfo: error.msg,
       displayWarn: 'display:none'
     });
   }, delayMillsecond);
   page.setData({
     warnInfo: error.msg,
     displayWarn: 'display:block'
   });
 }

wxss

 @import "../../template/up-pic.wxss";

 page {
   font-size: 30rpx;
 }

 button:active {
   opacity: 0.7;
 }

 .wran-tips {
   text-align: center;
   color: #fff;
   padding: 2%;
   width: 100%;
   background-color: #f00;
   display: flex;
   justify-content: center;
   position: fixed;
   top:;
 }

 .container-info {
   padding: 5%;
   /* margin-top: 4%; */
 }

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

 .man-form-info .name, .man-form-info .idcard, .man-form-info .phone,
 .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: 50%; */
   width: 100%;
 }

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

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

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

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

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

 .picture_list {
   /* justify-content: center; */
   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:;
   padding:;
   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;
 }