小程序实现表单校验

1、小程序表单验证插件WxValidate

地址：https://github.com/wux-weapp/wx-extend/tree/master/src

 将WxValidate.js放在utils文件夹下，方便使用；

 2、使用案例

（1）wxml

<form bindsubmit="formSubmit">
  <view class="page-section">
     <view class="weui-cells__title">姓名<text class="red">*</text></view>
     <view class="weui-cells weui-cells_after-title" style="width: 460rpx;">
        <view class="weui-cell weui-cell_input">
           <input class="weui-input"  name="userName" value="{
   
   { form.userName }}" placeholder="请输入姓名" />
        </view>
     </view>
  </view>
  <view class="page-section">
     <view class="weui-cells__title">证件类型<text class="red">*</text></view>
     <view class="weui-cells weui-cells_after-title" style="width: 460rpx;">
        <view class="weui-cell weui-cell_input">
           <picker value="{
   
   {form.certificateType}}" name='certificateType' range="{
   
   {certificate}}" bindchange="credentialsChose" >
              <view class="text-picker">{
   
   {form.certificateType}}</view>
           </picker>
        </view>
     </view>
  </view>
  <view class="page-section">
     <view class="weui-cells__title">证件号码<text class="red">*</text></view>
     <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
           <input class="weui-input" name='certificateNum' value="{
   
   {form.certificateNum}}" placeholder="请输入证件号码" bindchange='numCertificate' />
        </view>
     </view>
  </view>
  <view class="page-section">
     <view class="weui-cells__title">联系电话<text class="red">*</text></view>
     <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
           <input class="weui-input" name='phoneNum' value="{
   
   {from.phoneNum}}"  placeholder="请输入联系电话" bindinput="bindPhoneNum" bindchange='phoneNum' />
        </view>
     </view>
  </view>
  <view class="submit">
     <van-button type="info" block formType="submit">提交</van-button>
  </view>
</form>

(2)  js

// 引入下载的插件
import WxValidate from "../../../utils/WxValidate.js";

data: {
    // 在data中定义表单内容
    form: {
      userName: '',
      certificateType: '请选择证件类型',
      certificateNum: '',
      phoneNum: '',
      localType: 0,
      provinceTip: '',
      streetType: '请选择街镇',
      accessType: 0,
      professionTip: "请选择职业"
    },
}

/**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
  this.getScrollTop()
  this.initValidate() //验证规则函数,初始化字段规则和字段提示信息
},

initValidate() {
  const rules = {
    userName: { //用户名
      required: true,
      minlength: 2
    },
    certificateType: {
      required: true,
    },
    certificateNum: {
      required: true,
      idcard: true,
    },
    phoneNum: {
      required: true,
      tel: true
    }
  }
  const messages = { //提示信息
    userName: {
      required: '请填写姓名',
      minlength: '请输入正确的名称'
    },
    certificateType: {
      required: '请选择证件类型',
    },
    certificateNum: {
      required: '请输入身份证号码',
      idcard: '请输入正确的身份证号码',
    },
    phoneNum: {
      required: '请输入手机号',
      tel: '请输入正确的手机号',
    }
  }
  // 创造飙到验证实例
  this.WxValidate = new WxValidate(rules, messages)
  console.log(this.WxValidate);
},
//调用验证函数
formSubmit: function (e) {
  console.log('form发生了submit事件，携带的数据为：', e.detail.value)
  const params = e.detail.value
  console.log(e.detail.value);
  console.log(this.WxValidate.checkForm(params));
  //校验表单
  if (!this.WxValidate.checkForm(params)) {
    const error = this.WxValidate.errorList[0]
    console.log(error);
    wx.showToast({
      title: '未填写必填项',
      icon: 'none'
    })
    return false
  }
  console.log("yes");
  return true;
},

注意：

在wxml表单的书写时，form表单中定义的数据名称都要在input等组件中使用name进行绑定，否则在表单校验时找不到对应的value数据。

 由于表单是对象，在使用this.setData时，要修改form表单中的数据时，需要使用引号将数据名括起来

// 街道选择
streetChose(e) {
  this.setData({
    'form.streetType': this.data.street[e.detail.value],
  })
},