小程序之表单验证
小程序之表单验证
使用 WxValidate.js 插件来校验表单数据
常用实例方法：
| 名称 | 返回类型 | 描述 |
|---|---|---|
| checkForm(e) | boolean |
验证所有字段的规则，返回验证是否通过。 |
| valid() | boolean |
返回验证是否通过。 |
| size() | number |
返回错误信息的个数。 |
| validationErrors() | array |
返回所有错误信息。 |
| addMethod(name, method, message) | boolean |
添加自定义验证方法。 |
思路
根据 WxValidate.js 插件，定义 验证函数 initValidate 的规则及返回的信息，在 onLoad 生命周期中调用
使用 bindinput 、 bindblur 绑定事件和data-name传入对应的表单字段名 来实现单个输入框失焦的验证
在 bindinput 事件 根据传入的 data-name 赋值对应 form字段的值
通过 bindblur 事件，使用 checkForm 方法，验证对应 data-name 传入的字段，返回所有的错误信息 – error
则可以定义一个对象变量来存储错误的信息 – errorMsg
通过查找 chechForm 验证返回的错误信息 – error 中是否的 param字段的值是否与 data-name 传入的 一致
若一致，则将 data-name (name)对应字段赋值为 error一致的索引项，即 errorMsg[name] = error[index]
不一致，则删除 errorMsg 之前可能保存了对应 name 的键值，即 delete errorMsg[name]
重新赋值 errorMsg
在 wxml 中加入标签若对应的输入框有错误则显示对应的错误提示，否则不显示
<view class="tip" wx:if="{{errorMsg['companyName'].param == 'companyName'}}">{{errorMsg['companyName'].msg}}
view>
在 formSubmit 函数中，重新赋值 errorMsg: {}，验证form所有字段，返回错误信息，使用wx.showToast提示第一条错误信息，根据返回的所有错误信息 error 来设置 errorMsg 的格式
// 设置储存的 errorMsg 格式
errorMsg: {
companyName: {
msg: "请填写公司名称"
param: "companyName"
value: ""
},
applyName: {
msg: "请输入申请人姓名"
param: "applyName"
value: ""
}
}
步骤
定义验证的表单对象 form
| 字段 | 备注 |
|---|---|
| companyName | 公司名称 |
| creditCode | 统一社会信用代码 |
| applyName | 申请人姓名 |
| idcardCode | 申请人身份证号码 |
编写 wxml 及样式设置
按以下格式：
<form bindsubmit="formSubmit">
<view class="formItem">
<view class="formItemLable">公司名称：view>
<input type="text" name="companyName" value="{{form.companyName}}" placeholder="请输入公司名称" />
view>
......
<button class="formBtn" form-type='submit'>提交button>
form>
根据 WxValidate.js 插件 编写验证规则函数
initValidate() {
const rules = {
companyName: {
required: true,
moocheck1: true
},
creditCode: {
required: true,
moocreditcode: true
},
applyName: {
required: true,
moocheck1: true
},
idcardCode: {
required: true,
idcard: true
},
}
const messages = {
companyName: {
required: '请填写公司名称',
moocheck1: '请输入正确的公司名称'
},
creditCode: {
required: '请输入统一社会信用代码',
moocreditcode: '请输入正确的统一社会信用代码'
},
applyName: {
required: '请输入申请人姓名',
moocheck1: '请输入正确的申请人姓名'
},
idcardCode: {
required: '请输入申请人身份证号码',
idcard: '请输入正确的申请人身份证号码'
},
}
this.WxValidate = new WxValidate(rules, messages)
},
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '表单验证'
});
//验证规则函数
this.initValidate();
}
其中规则中的 moocheck1 和 moocreditcode 是在 WxValidate.js 插件 中，自己定义的两个规则
如果要添加自定义验证方法，可以根据 WxValidate.js 插件 提供的方法添加。
bindinput 和 bindblur
bindinput
根据 data-name 传入的 键名，可以获取并设置各个输入框中的值
handleInput(e) {
const { name } = e.currentTarget.dataset;
let obj = {
...this.data.form,
[name]: e.detail.value
}
this.setData({
form: { ...obj }
})
},
bindblur
根据 data-name 传入的 键名(name)，使用 checkForm 验证对应的字段，且返回所有的错误信息
设置变量 errorMsg 来存储这些错误
通过 查找所有的错误信息中的 param 键的值是否与 name 一致，返回索引
若有，则可以设置 errorMsg 的格式
若无，则清除之前可能保存了对应 name 的字段
handleBlur(e) {
const { name } = e.currentTarget.dataset;
/* 由于 checkForm 是返回所有的错误信息，所以需要筛选，当错误信息中有一条是与
* name 一样的则是验证不成功
*/
let errorMsg = this.data.errorMsg || {};
if (!this.WxValidate.checkForm({ [name]: this.data.form[name] })) {
const error = this.WxValidate.errorList;
let index = error.findIndex(v => {
return v.param == name;
})
if (index > -1) {
errorMsg[name] = error[index];
this.setData({
errorMsg
})
} else {
delete errorMsg[name];
this.setData({
errorMsg
})
}
return false
} else {
console.log('可以')
}
},
表单提交
重新赋值 errorMsg，校验 form 所有字段，若有错误 showToast 提示第一个错误
通过 返回的所有错误信息来设置 errorMsg 格式
//调用验证函数
formSubmit: function (e) {
this.setData({
errorMsg: {}
})
const params = e.detail.value;
//校验表单
if (!this.WxValidate.checkForm(params)) {
const error = this.WxValidate.errorList;
this.showToast(error[0]);
let errorMsg = {};
error.forEach(v => {
errorMsg[v.param] = v
})
this.setData({
errorMsg
})
return false
} else {
}
this.showToast({
msg: '提交成功'
})
},
代码
wxml
<view class="formWrap">
<form bindsubmit="formSubmit">
<view class="formItem">
<view class="formItemLable">公司名称：</view>
<input type="text" name="companyName" value="{{form.companyName}}" bindinput="handleInput"
bindblur="handleBlur" data-name="companyName" placeholder="请输入公司名称" />
<view class="tip" wx:if="{{errorMsg['companyName'].param == 'companyName'}}">{{errorMsg['companyName'].msg}}
</view>
</view>
<view class="formItem">
<view class="formItemLable">统一社会信用代码：</view>
<input type="text" name="creditCode" value="{{form.creditCode}}" bindinput="handleInput"
bindblur="handleBlur" data-name="creditCode" placeholder="请输入统一社会信用代码" />
<view class="tip" wx:if="{{errorMsg['creditCode'].param == 'creditCode'}}">{{errorMsg['creditCode'].msg}}
</view>
</view>
<view class="formItem">
<view class="formItemLable">申请人姓名：</view>
<input type="text" name="applyName" value="{{form.applyName}}" bindinput="handleInput" bindblur="handleBlur"
data-name="applyName" placeholder="请输入申请人姓名" />
<view class="tip" wx:if="{{errorMsg['applyName'].param == 'applyName'}}">{{errorMsg['applyName'].msg}}
</view>
</view>
<view class="formItem">
<view class="formItemLable">申请人身份证号码：</view>
<input type="text" name="idcardCode" value="{{form.idcardCode}}" bindinput="handleInput"
bindblur="handleBlur" data-name="idcardCode" placeholder="请输入申请人身份证号码" maxlength="18" />
<view class="tip" wx:if="{{errorMsg['idcardCode'].param == 'idcardCode'}}">{{errorMsg['idcardCode'].msg}}
</view>
</view>
<button class="formBtn" form-type='submit'>提交</button>
</form>
</view>
less
.formWrap {
padding: 58rpx 48rpx;
form {
.formItem {
margin-bottom: 38rpx;
.formItemLable {
margin-bottom: 16rpx;
}
input {
padding: 0 18rpx;
height: 88rpx;
border-radius: 2rpx;
border: 1px solid #979797;
box-sizing: border-box;
}
}
}
.tip {
margin-top: 10rpx;
font-size: 28rpx;
color: rgb(196, 36, 36);
}
button.formBtn {
width: 100%;
height: 96rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #009eff;
color: #fff;
font-size: 28rpx;
border-radius: 48rpx;
margin-top: 98rpx;
}
}
js
import WxValidate from "../../utils/WxValidate";
Page({
/**
* 页面的初始数据
*/
data: {
form: {
companyName: '',
creditCode: '',
applyName: '',
idcardCode: ''
},
errorMsg: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '表单验证'
});
//验证规则函数
this.initValidate();
},
// bindinput
handleInput(e) {
const { name } = e.currentTarget.dataset;
let obj = {
...this.data.form,
[name]: e.detail.value
}
this.setData({
form: { ...obj }
})
},
// params: {},
handleBlur(e) {
const { name } = e.currentTarget.dataset;
/* 由于 checkForm 是返回所有的错误信息，所以需要筛选，当错误信息中有一条是与
* name 一样的则是验证不成功
*/
let errorMsg = this.data.errorMsg || {};
if (!this.WxValidate.checkForm({ [name]: this.data.form[name] })) {
const error = this.WxValidate.errorList;
let index = error.findIndex(v => {
return v.param == name;
})
if (index > -1) {
errorMsg[name] = error[index];
this.setData({
errorMsg
})
} else {
delete errorMsg[name];
this.setData({
errorMsg
})
}
return false
} else {
console.log('可以')
}
},
// 提示
showToast(error) {
wx.showToast({
title: error.msg,
icon: 'none',
duration: 1500,
mask: false,
});
},
//验证函数
initValidate() {
const rules = {
companyName: {
required: true,
moocheck1: true
},
creditCode: {
required: true,
moocreditcode: true
},
applyName: {
required: true,
moocheck1: true
},
idcardCode: {
required: true,
idcard: true
},
}
const messages = {
companyName: {
required: '请填写公司名称',
moocheck1: '请输入正确的公司名称'
},
creditCode: {
required: '请输入统一社会信用代码',
moocreditcode: '请输入正确的统一社会信用代码'
},
applyName: {
required: '请输入申请人姓名',
moocheck1: '请输入正确的申请人姓名'
},
idcardCode: {
required: '请输入申请人身份证号码',
idcard: '请输入正确的申请人身份证号码'
},
}
this.WxValidate = new WxValidate(rules, messages)
},
// 调用验证函数
formSubmit: function (e) {
this.setData({
errorMsg: {}
})
const params = e.detail.value;
//校验表单
if (!this.WxValidate.checkForm(params)) {
const error = this.WxValidate.errorList;
this.showToast(error[0]);
let errorMsg = {};
error.forEach(v => {
errorMsg[v.param] = v
})
this.setData({
errorMsg
})
return false
} else {
}
this.showToast({
msg: '提交成功'
})
},
})
WXValidate.js