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

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

1. school.wxml:

  
    校区名称
    
  
  
    联系电话
    
  
  保存

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

参数说明

内置校验规则

常用实例方法

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