微信小程序之表单验证rule

微信⼩程序之表单验证rule
表单验证是javascript中的⾼级选项之⼀。

JavaScript 可⽤来在数据被送往前对表单中的这些输⼊数据进⾏验证 [1] 。

被 JavaScript 验证的这些典型的数据有：
⽤户是否已填写表单中的必填项⽬？
⽤户输⼊的邮件地址是否合法？
⽤户是否已输⼊合法的？
⽤户是否在数据域(numeric field) 中输⼊了⽂本？
⽤⼤⽩话说可以举例类似，我们在⼀个⽹站的注册页⾯，填写⼀些相关信息，这时候点击提交的时候，如果我们有些“必填”信息没有输⼊，⽹站就会给出相应的提⽰，⽐如：密码不能为空，已填⼊信息的正确性、⾝份证格式、⼿机格式错误等等。

此类验证我们都统称为表单验证，那我们今天看看在⼩程序中，我们如何可以更⽅便的处理类似的表单验证呢？
我们以注册场景为例，看看本篇内容要实现什么效果：
以上就是我们实现后的表单验证效果。

那我们⼀起来是如何实现的吧～
1|2代码实现
插件介绍
⾸先我们需要⽤到⼀个 WxValidate - 表单验证的js插件。

我们⼀起来看看它⾥⾯包含什么内容：
在⼩程序中使⽤
看了上⾯的插件介绍，是不是还是⼀头雾⽔呢？不要急，下⾯，我们就来⼀起看看上⾯的验证效果配合插件是如何实现的吧。

①，我们需要引⼊WxValidate.js，可以直接复制如下js代码块：
View Code
②在我们要验证的页⾯js中导⼊js，并在data中增加form⼦元素
//导⼊验证js
import WxValidate from "../../utils/WxValidate";
data: {
form: {//增加form⼦元素
items: [
{ name: '1', value: '男', checked: 'true' },
{ name: '2', value: '⼥' }
],
date: '请选择出⽣年⽉',
casArray: ['⾝份证', '护照', '其他/港澳台居民⾝份证', '外国⼈永久居留⾝份证'],
}
},
③初始化表单验证规则，我⼀般写在onLoad中
onLoad: function () {
this.initValidate();
},
initValidate() {
let rules = {
Name: {
required: true,
maxlength: 10
},
sex: {
required: true,
number: true
}
,
birthDate: {
required: true,
dateISO: true,
},
Card: {
required: false,
idcard: true
}
}
let message = {
Name: {
required: '请输⼊姓名',
maxlength: '名字不能超过10个字'
},
Card: {
idcard: "请输⼊正确的⾝份证号码"
},
sex: {
required: "请选择您的性别",
number: '请您选择您的性别'
}
,
birthDate: {
required: "请选择出⽣年⽉",
dateISO: "请选择出⽣年⽉",
},
}
//实例化当前的验证规则和提⽰消息
this.WxValidate = new WxValidate(rules, message); }
④最后在表单提交⽅法中调⽤验证⽅法就⾏了formSubmit: function (e) {
let params = e.detail.value;
if (!this.WxValidate.checkForm(params)) {
//表单元素验证不通过，此处给出相应提⽰
let error = this.WxValidate.errorList[0];
switch (error.param) {
case "Name":
//TODO
break;
case "sex":
//TODO
break;
case "birthDate":
//TODO
break;
case "Card":
//TODO
break;
}
}
return false;
}
//验证通过，往下执⾏
原⽹址：。