现在网络上关于小程序的表单验证其实是没有更好的解决方法的，这是由小程序特殊的前端框架模式决定的。也许小程序脚本如果开放js的dom操作的话，会变得简单很多，但这样又会与前端模式相背离，估计是不会开放的。
现在最常用的验证插件应该是WxValidate，提供了类似于jQuery Validate 的验证配置模式。使用上也相差不大。
WxValidate插件官网：https://github.com/wux-weapp/wx-extend/blob/master/src/pages/validate/index.js#L1
WxValidate插件
WxValidate插件基本的使用方法如下：
//验证函数
initValidate() {
const rules = {
nickName: {
required: true,
minlength:2
},
phone:{
required:true,
tel:true
},
age:{
required:true,
},
sex:{
required:true,
}
}
const messages = {
nickName: {
required: '请填写姓名',
minlength:'请输入正确的名称'
},
phone:{
required:'请填写手机号',
tel:'请填写正确的手机号'
},
age:{
required:'请填写年纪',
},
sex:{
required:'请填写性别',
}
}
this.WxValidate = new WxValidate(rules, messages)
},
//调用验证函数
formSubmit: function(e) {
console.log('form发生了submit事件，携带的数据为：', e.detail.value)
const params = e.detail.value
//校验表单
if (!this.WxValidate.checkForm(params)) {
const error = this.WxValidate.errorList[0]
this.showModal(error)
return false
}
this.showModal({
msg: '提交成功'
})
}我没有做太多的了解，因为不太喜欢这种配置方式，同样的字段要分rule和message分开写两次，有点繁琐。具体可以参考官方文档。
我这里重点介绍的是下面这个验证组件，async-validator。
async-validator官网：https://github.com/yiminghe/async-validator
下面介绍它的基本用法。
首先是组件安装与引用
npm i async-validator
import Schema from ‘async-validator’
组件基本配置
const descriptor = {
userName: { type: 'string',required: true },
pass: { type: 'string',required: true }
}
const descriptor = {
pass: { required: true, pattern:/^\w{6,20}$/ }
}
const descriptor = {
userName: { type: 'string', min: 6, max: 20 },
role: { type: 'array', min: 1, max: 3 },
age: { type: 'integer', min: 18, max: 60 }
}
const descriptor = {
userName: { type: 'string', len: 6},
age: { type: 'integer', len: 6},
role: { type: 'array', len: 6 }
}
const descriptor = {
role: { type: "enum", enum: ['admin', 'user', 'guest'] }
}
const descriptor = {
userName: { type: 'string', required: true},
pass: { type: 'string', required: true, whitespace: true }
}
const descriptor = {
userName: {
type: 'string',
required: true,
transform (value) {
return value.trim()
}
}
var descriptor = {
urls: {
type: "array",
required: true,
defaultField: {type: "url"}
}
}
//深层对象验证
const descriptor = {
demo: {
type: "array",
required: true,
len: 3,
fields: {
0: {type: "string", required: true},
1: {type: "number", required: true},
2: {type: "url", required: true}
}
}
}
const descriptor = {
ageRange:{
validator (rule, value, callback) {
const _value = _.compact(value) // 使用loash过滤掉假值
if (!_value.length) {
callback(rule.field + '至少要包含一个数据')
} else if (_value[0] - _value[1] > 0) {
callback(rule.field + '结束值不能小于初始值')
} else {
callback()
}
}
}
}
const descriptor = {
userName: {
asyncValidator (rule, value, callback) {
axios({
url: '/users',
params: { userName: value }
}).then((data) => {
callback()
}, (error) => {
callback(new Error(error))
})
}
}
}
const descriptor = {
name(rule, value, callback, source, options) {
const errors = [];
if (!/^[a-z0-9]+$/.test(value)) {
errors.push(new Error(
util.format('%s must be lowercase alphanumeric characters', rule.field),
));
}
return errors;
},
};
const validator = new Schema(descriptor);
validator.validate({ name: 'Firstname' }, (errors, fields) => {
if (errors) {
return handleErrors(errors, fields);
}
// validation passed
});
const validator = new Schema(descriptor)另一种配置方法，是多规则以及与提示文字合并作数组，非常紧凑，严重推荐！！！
阅读全文
公众号近期文章
赞赏支持
0 Responses to “async-validator表单验证用法 小程序适用”