本篇文章给大家带来的内容是关于小程序的开发：表单的验证(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
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 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。
参数说明
参数类型描述
rules object 验证字段的规则
messages object 验证字段的提示信息
内置校验规则
序号规则描述
1 required: true 这是必填字段。
2 email: true 请输入有效的电子邮件地址。
3 tel: true 请输入11位的手机号码。
4 url: true 请输入有效的网址。
5 date: true 请输入有效的日期。
6 dateiso: true 请输入有效的日期（iso），例如：2009-06-23，1998/01/22。
7 number: true 请输入有效的数字。
8 digits: true 只能输入数字。
9 idcard: true 请输入18位的有效身份证。
10 equalto: 'field' 输入值必须和 field 相同。
11 contains: 'abc' 输入值必须包含 abc。
12 minlength: 5 最少要输入 5 个字符。
13 maxlength: 10 最多可以输入 10 个字符。
14 rangelength: [5, 10] 请输入长度在 5 到 10 之间的字符。
15 min: 5 请输入不小于 5 的数值。
16 max: 10 请输入不大于 10 的数值。
17 range: [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: '请输入邮箱', 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 }},
相关推荐：
小程序：实现点击倒计时的代码
小程序组件：聊天会话组件的介绍（附代码）
小程序与后台进行交互的实现（附代码）
以上就是小程序的开发：表单的验证(代码)的详细内容。