小程序的开发：表单的验证(代码)

本篇文章给大家带来的内容是关于小程序的开发：表单的验证(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1. school.wxml:<form bindsubmit='formSubmit'><view>注:

WxValidate - 表单验证

插件介绍

该插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。

参数说明参数类型描述rulesobject验证字段的规则messagesobject验证字段的提示信息内置校验规则序号规则描述1required: true这是必填字段。2email: true请输入有效的电子邮件地址。3tel: true请输入11位的手机号码。4url: true请输入有效的网址。5date: true请输入有效的日期。6dateISO: true请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。7number: true请输入有效的数字。8digits: true只能输入数字。9idcard: true请输入18位的有效身份证。10equalTo: 'field'输入值必须和 field 相同。11contains: 'ABC'输入值必须包含 ABC。12minlength: 5最少要输入 5 个字符。13maxlength: 10最多可以输入 10 个字符。14rangelength: [5, 10]请输入长度在 5 到 10 之间的字符。15min: 5请输入不小于 5 的数值。16max: 10请输入不大于 10 的数值。17range: [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.valueconsole.log(params)// 传入表单数据，调用验证方法if (!this.WxValidate.checkForm(e)) {const error = this.WxValidate.errorList[0]return false}},相关推荐：

小程序：实现点击倒计时的代码

小程序组件：聊天会话组件的介绍（附代码）小程序与后台进行交互的实现（附代码）以上就是小程序的开发：表单的验证(代码)的详细内容，更多请关注小潘博客其它相关文章！