建网站买空间,山东恒昆建设工程有限公司网站,wordpress 好主题哦,成都旅游攻略景点必去使用 WxValidate.js 插件来校验表单数据
常用实例方法
名称返回类型描述checkForm(e)boolean验证所有字段的规则#xff0c;返回验证是否通过。valid()boolean返回验证是否通过。size()number返回错误信息的个数。validationErrors()array返回所有错误信息。addMethod(name…使用 WxValidate.js 插件来校验表单数据
常用实例方法
名称返回类型描述checkForm(e)boolean验证所有字段的规则返回验证是否通过。valid()boolean返回验证是否通过。size()number返回错误信息的个数。validationErrors()array返回所有错误信息。addMethod(name, method, message)boolean添加自定义验证方法。
内置校验规则
序号规则描述1required: true这是必填字段。2email: true请输入有效的电子邮件地址。3tel: true请输入11位的手机号码。4url: true请输入有效的网址。5date: true请输入有效的日期。6dateISO: true请输入有效的日期ISO例如2009-06-231998/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 之间的数值。 根据 WxValidate.js 插件定义 验证函数 initValidate 的规则及返回的信息在 onLoad 生命周期中调用 使用 bindinput 、 bindblur 绑定事件和data-name传入对应的表单字段名 来实现单个输入框失焦的验证 initValidate() {//验证规则和提示信息let rulesAndMsg {Name: {rules: {required: true},message: {required: 请输入姓名}},IDCard: {rules: {required: true,idcard: true,},message: {required: 请输入身份证号,idcard: 请输入正确的身份证号码,}},Age: {rules: {required: true,rangeRom: [1, 120],},message: {required: 请输入年龄}},}//实例化当前的验证规则和提示消息this.WxValidate new WxValidate(rulesAndMsg);/*** 自定义验证规则传3个参数* name 是添加的方法的名字* method 是一个函数,value:元素的值param是参数* message 是自定义的错误提示*/this.WxValidate.addMethod(rangeRom, (value, param) {return this.WxValidate.optional(value) || (value param[0] value param[1])}, 年龄范围是: 1-120);},
提交时校验
if (!this.WxValidate.checkForm(this.data.form)) {//表单元素验证不通过此处给出相应提示this.setData({errorList: this.WxValidate.errorList,})return false;}
更改了方法具体文件点此处详见
