微信小程序之表单验证

我们在一个网站的注册页面，填写一些相关信息，这时候点击提交的时候，如果我们有些“必填”信息没有输入，网站就会给出相应的提示，比如：密码不能为空，已填入信息的正确性、身份证格式、手机格式错误等等。此类验证我们都统称为表单验证，那我们今天看看在小程序中，我们如何可以更方便的处理类似的表单验证呢？可以使用 WxValidate - 表单验证的js插件

代码实现

PS：为了使用方便，在原来的基础上新增了checkField(props, data) 用来验证部分字段的规则

在小程序中使用

1.项目中创建WxValidate.js，下载文件：

2.在我们要验证的页面js中导入js

import WxValidate from "../../utils/WxValidate";

3.初始化表单验证规则，我一般写在onLoad中

onLoad: function () {
  this.initValidate();
},
initValidate() {
  let rules = {
    name: {
      required: true,
      maxlength: 10
    },
    card: {
      required: false,
      idcard: true
    }
  }

  let message = {
    name: {
      required: '请输入姓名',
      maxlength: '名字不能超过10个字'
    },
    card: {
      idcard: "请输入正确的身份证号码"
    }
  }
  //实例化当前的验证规则和提示消息
  this.WxValidate = new WxValidate(rules, message);
}

4.最后在表单提交方法中调用验证方法就行了

formSubmit: function (e) {
 let params = e.detail.value;
 if (!this.WxValidate.checkForm(params)) {
    let error = this.WxValidate.errorList;
    console.log('表单验证不通过，错误信息：', error)
    return false;
 }
 // 验证通过，往下执行
}

原文来自

微信小程序之表单验证