这篇文章主要介绍小程序中如何实现表单验证，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、营销推广、网站程序开发、HTML5响应式重庆网站建设、移动网站建设、微商城、网站托管及成都企业网站维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为柔性防护网行业客户提供了网站维护服务。
1. school.wxml:
校区名称
联系电话
保存
2.school.js:
import WxValidate from '../utils/classes/WxValidate.js'var validate;
Page({ // 初始化表单校验
initValidate(){ // 创建实例对象
this.validate = new WxValidate({
name: {
required: true,
maxlength: 20
},
contactphone: {
tel: true
}
}, {
name: {
required: '请输入校区名称!',
maxlength: '名称不得超过20字!'
},
contactphone: {
tel: '电话格式不正确!'
}
})
},
data: {
},
onLoad: function (options) {
this.initValidate()
},
formSubmit(e){ // 校验表单
if (!this.validate.checkForm(e.detail.value)){
const error = this.validate.errorList[0];
wx.showToast({
title: `${error.msg} `,
icon: 'none'
})
return false
} // 保存操作...
}
})注:
WxValidate - 表单验证
插件介绍
该插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。
参数说明
| 参数 | 类型 | 描述 | | rules | object | 验证字段的规则 |
| messages | object | 验证字段的提示信息 |
内置校验规则
| 序号 | 规则 | 描述 | | 1 | required: true | 这是必填字段。 |
| 2 | email: true | 请输入有效的电子邮件地址。 |
| 3 | tel: true | 请输入11位的手机号码。 |
| 4 | url: true | 请输入有效的网址。 |
| 5 | date: true | 请输入有效的日期。 |
| 6 | dateISO: true | 请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。 |
| 7 | number: true | 请输入有效的数字。 |
| 8 | digits: true | 只能输入数字。 |
| 9 | idcard: true | 请输入18位的有效身份证。 |
| 10 | equalTo: 'field' | 输入值必须和 field 相同。 |
| 11 | contains: 'ABC' | 输入值必须包含 ABC。 |
| 12 | minlength: 5 | 最少要输入 5 个字符。 |
| 13 | maxlength: 10 | 最多可以输入 10 个字符。 |
| 14 | rangelength: [5, 10] | 请输入长度在 5 到 10 之间的字符。 |
| 15 | min: 5 | 请输入不小于 5 的数值。 |
| 16 | max: 10 | 请输入不大于 10 的数值。 |
| 17 | range: [5, 10] | 请输入范围在 5 到 10 之间的数值。 |
常用实例方法
| 名称 | 返回类型 | 描述 | | checkForm(e) | boolean | 验证所有字段的规则，返回验证是否通过。 |
| valid() | boolean | 返回验证是否通过。 |
| size() | number | 返回错误信息的个数。 |
| validationErrors() | array | 返回所有错误信息。 |
| addMethod(name, method, message) | boolean | 添加自定义验证方法。 |
addMethod(name, method, message) - 添加自定义校验
第一个参数 name 是添加的方法的名字。
第二个参数 method 是一个函数，接收三个参数 (value, param) ，value 是元素的值，param 是参数。
第三个参数 message 是自定义的错误提示。
使用说明
// 验证字段的规则const rules = {
email: {
required: true,
email: true,
},
tel: {
required: true,
tel: true,
},
idcard: {
required: true,
idcard: true,
},
}// 验证字段的提示信息，若不传则调用默认的信息const messages = {
email: {
required: '请输入邮箱',
email: '请输入正确的邮箱',
},
tel: {
required: '请输入手机号',
tel: '请输入正确的手机号',
},
idcard: {
required: '请输入身份证号码',
idcard: '请输入正确的身份证号码',
},
}
// 创建实例对象
this.WxValidate = new WxValidate(rules, messages)
// 自定义验证规则
this.WxValidate.addMethod('assistance', (value, param) => {
return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
}, '请勾选1-2个敲码助手')// 如果有个表单字段的 assistance，则在 rules 中写assistance: {
required: true,
assistance: true,
},// 调用验证方法，传入参数 e 是 form 表单组件中的数据submitForm(e) {
const params = e.detail.value
console.log(params) // 传入表单数据，调用验证方法
if (!this.WxValidate.checkForm(e)) {
const error = this.WxValidate.errorList[0]
return false
}
},以上是“小程序中如何实现表单验证”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
新闻名称：小程序中如何实现表单验证
本文地址：
http://bjjierui.cn/article/jiidhd.html
