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

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

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

1. school.wxml:

校区名称联系电话保存-

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。