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

1. school.wxml:

<form bindsubmit='formSubmit'><view class="subInfo">   <view class="subInfoItem clearfix">     <text class="tag need">校区名称</text>     <input name='name' value='' placeholder='请输入校区名称' placeholder-class='placeholder'></input>   </view>   <view class="subInfoItem clearfix">     <text class="tag">联系电话</text>     <input name='contactphone' value='' placeholder='请输入联系电话' placeholder-class='placeholder'></input>   </view></view><view class='btnWrap'>   <button class='saveBtn' form-type='submit'>保存</button></view></form>

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 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。

参数说明

内置校验规则

常用实例方法

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     } },

相关推荐：

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

小程序组件：聊天会话组件的介绍（附代码）

以上就是小程序的开发：表单的验证(代码)的详细内容，更多内容请关注技术你好其它相关文章！