2023年6月21日发(作者：)

微信⼩程序开发之表单验证WxValidate使⽤微信⼩程序的开发框架个⼈感觉⼤体上跟VUE是差不多的，但是他的表单组件没有⾃带的验证功能，因此开发⼩程序的表单验证时候⼀般有两种⽅法，⼀是⾃⼰裸写验证规则，但是需要⽐较扎实的正则表达式基础，⼀种是利⽤官⽅社区开发的WxValidate插件进⾏表单验证。WxValidate插件是参考 jQuery Validate 封装的，为⼩程序表单提供了⼀套常⽤的验证规则，包括⼿机号码、电⼦邮件验证等等，同时提供了添加⾃定义校验⽅法，让表单验证变得更简单。⾸先插件的下载地址和官⽅⽂档都在具体的⽂件的位置在////wx-validate/⾸先引⼊的⽅法就是将插件⽂件拷贝到你所需要的⽂件⽬录下之后可以采⽤局部引⽤的⽅式将插件引⼊到你所需要的页⾯的JS⽂件⾥，具体操作如下//页⾯下import WxValidate from '../../utils/'const app = getApp()Page({ data: { form: { name: '', phone: '' } }})这⾥需要注意的是⽂件路径的写法/是从根⽬录开始算起 ./是从引⼊⽂件的⽬录⽂件开始，此例⼦中就是所在⽬录开始算起 ../就是从引⼊⽂件的⽗级⽬录开始算起，此例⼦中index⽂件夹⽬录，⽽../../就是从pages所在⽬录开始算起，如果这个地⽅的⽂件路径写错，编译就会报错之后就是注意在wxml⽂件中对表单组件的数据绑定，否则⽆论表单组件如何填写，都⽆法验证规则。表单组件的绑定⽅法如下//wxml页⾯下

请填写个⼈信息 姓名 ⼿机号
主要的⽅法就是在需要验证的input框内加⼊value值的绑定，其他的组件同理然后在js⽂件中加⼊form表单的绑定//({ data: { form: { name: '', phone: '' } }})然后就是最重要的验证规则的书写了⾸先要在onLoad函数中加⼊验证规则函数// onLoad中有多个函数的写法，onLoad函数内写函数名，函数在onLoad外定义onLoad() { r() lidate()//验证规则函数 }

//onLoad中只有⼀个函数的写法onLoad:function(){ rules:{} messages:{} }此处需要注意的是⼀定要在js⽂件中onLoad验证规则，否则编译会报checkform is not a function

然后是验证规则和报错规则的代码//报错

showModal(error) { dal({ content: , showCancel: false, }) },//验证函数initValidate() { const rules = { name: { required: true, minlength:2 }, phone:{ required:true, tel:true } } const messages = { name: { required: '请填写姓名', minlength:'请输⼊正确的名称' }, phone:{ required:'请填写⼿机号', tel:'请填写正确的⼿机号' } } date = new WxValidate(rules, messages) },//调⽤验证函数 formSubmit: function(e) { ('form发⽣了submit事件，携带的数据为：', ) const params = //校验表单 if (!orm(params)) { const error = ist[0] dal(error) return false } dal({ msg: '提交成功' }) } 这⾥我只写了⼀点字段的验证，官⽅⽂档中还包含了很多字段的验证规则，我就不⼀⼀写出来了，这⾥需要注意的是在initValidate（）中要实例化对象，⾄此表单验证就已经完成了 下⾯看看演⽰效果⼤家还可以⾃⾏跑⼀下在上⾯下载的实例，⾥⾯有更多表单验证的效果到此这篇关于微信⼩程序开发之表单验证WxValidate使⽤的⽂章就介绍到这了,更多相关⼩程序表单验证内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

2023年6月21日发(作者：)

微信⼩程序开发之表单验证WxValidate使⽤微信⼩程序的开发框架个⼈感觉⼤体上跟VUE是差不多的，但是他的表单组件没有⾃带的验证功能，因此开发⼩程序的表单验证时候⼀般有两种⽅法，⼀是⾃⼰裸写验证规则，但是需要⽐较扎实的正则表达式基础，⼀种是利⽤官⽅社区开发的WxValidate插件进⾏表单验证。WxValidate插件是参考 jQuery Validate 封装的，为⼩程序表单提供了⼀套常⽤的验证规则，包括⼿机号码、电⼦邮件验证等等，同时提供了添加⾃定义校验⽅法，让表单验证变得更简单。⾸先插件的下载地址和官⽅⽂档都在具体的⽂件的位置在////wx-validate/⾸先引⼊的⽅法就是将插件⽂件拷贝到你所需要的⽂件⽬录下之后可以采⽤局部引⽤的⽅式将插件引⼊到你所需要的页⾯的JS⽂件⾥，具体操作如下//页⾯下import WxValidate from '../../utils/'const app = getApp()Page({ data: { form: { name: '', phone: '' } }})这⾥需要注意的是⽂件路径的写法/是从根⽬录开始算起 ./是从引⼊⽂件的⽬录⽂件开始，此例⼦中就是所在⽬录开始算起 ../就是从引⼊⽂件的⽗级⽬录开始算起，此例⼦中index⽂件夹⽬录，⽽../../就是从pages所在⽬录开始算起，如果这个地⽅的⽂件路径写错，编译就会报错之后就是注意在wxml⽂件中对表单组件的数据绑定，否则⽆论表单组件如何填写，都⽆法验证规则。表单组件的绑定⽅法如下//wxml页⾯下

请填写个⼈信息 姓名 ⼿机号
主要的⽅法就是在需要验证的input框内加⼊value值的绑定，其他的组件同理然后在js⽂件中加⼊form表单的绑定//({ data: { form: { name: '', phone: '' } }})然后就是最重要的验证规则的书写了⾸先要在onLoad函数中加⼊验证规则函数// onLoad中有多个函数的写法，onLoad函数内写函数名，函数在onLoad外定义onLoad() { r() lidate()//验证规则函数 }

//onLoad中只有⼀个函数的写法onLoad:function(){ rules:{} messages:{} }此处需要注意的是⼀定要在js⽂件中onLoad验证规则，否则编译会报checkform is not a function

然后是验证规则和报错规则的代码//报错

showModal(error) { dal({ content: , showCancel: false, }) },//验证函数initValidate() { const rules = { name: { required: true, minlength:2 }, phone:{ required:true, tel:true } } const messages = { name: { required: '请填写姓名', minlength:'请输⼊正确的名称' }, phone:{ required:'请填写⼿机号', tel:'请填写正确的⼿机号' } } date = new WxValidate(rules, messages) },//调⽤验证函数 formSubmit: function(e) { ('form发⽣了submit事件，携带的数据为：', ) const params = //校验表单 if (!orm(params)) { const error = ist[0] dal(error) return false } dal({ msg: '提交成功' }) } 这⾥我只写了⼀点字段的验证，官⽅⽂档中还包含了很多字段的验证规则，我就不⼀⼀写出来了，这⾥需要注意的是在initValidate（）中要实例化对象，⾄此表单验证就已经完成了 下⾯看看演⽰效果⼤家还可以⾃⾏跑⼀下在上⾯下载的实例，⾥⾯有更多表单验证的效果到此这篇关于微信⼩程序开发之表单验证WxValidate使⽤的⽂章就介绍到这了,更多相关⼩程序表单验证内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！