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

本篇文章给大家带来的内容是关于小程序的开发：表单的验证(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

 form bindsubmit= #39;formSubmit #39; view >2.school.js:
import WxValidate from #39;../utils/classes/WxValidate.js #39;var validate;
Page({ // 初始化表单校验
 initValidate(){ // 创建实例对象
 this.validate = new WxValidate({
 name: {
 required: true,
 maxlength: 20
 contactphone: {
 tel: true
 }, {
 name: {
 required: #39;请输入校区名称! #39;,
 maxlength: #39;名称不得超过20字! #39;
 contactphone: {
 tel: #39;电话格式不正确! #39;
 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: #39;none #39;
 return false
 } // 保存操作...
})
注:
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: #39;请输入邮箱 #39;,
 email: #39;请输入正确的邮箱 #39;,
 tel: {
 required: #39;请输入手机号 #39;,
 tel: #39;请输入正确的手机号 #39;,
 idcard: {
 required: #39;请输入身份证号码 #39;,
 idcard: #39;请输入正确的身份证号码 #39;,
// 创建实例对象
this.WxValidate = new WxValidate(rules, messages)
// 自定义验证规则
this.WxValidate.addMethod( #39;assistance #39;, (value, param) = { 
return this.WxValidate.optional(value) || (value.length = 1 value.length = 2)
}, #39;请勾选1-2个敲码助手 #39;)// 如果有个表单字段的 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
},
相关推荐：
小程序：实现点击倒计时的代码
小程序组件：聊天会话组件的介绍（附代码）
小程序与后台进行交互的实现（附代码）
以上就是小程序的开发：表单的验证(代码)的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。