這篇文章主要介紹小程序中如何實現(xiàn)表單驗證，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供網(wǎng)站設計制作、網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)連云免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

1. school.wxml:

  
    校區(qū)名稱
    
  
  
    聯(lián)系電話
    
  
  保存

2.school.js:

import WxValidate from '../utils/classes/WxValidate.js'var validate;

Page({    // 初始化表單校驗
    initValidate(){        // 創(chuàng)建實例對象
        this.validate = new WxValidate({
            name: {
                required: true,
                maxlength: 20
            },
            contactphone: {
                tel: true
            }
        }, {
                name: {
                    required: '請輸入校區(qū)名稱!',
                    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 封裝的，為小程序表單提供了一套常用的驗證規(guī)則，包括手機號碼、電子郵件驗證等等，同時提供了添加自定義校驗方法，讓表單驗證變得更簡單。

參數(shù)說明

參數(shù)	類型	描述
rules	object	驗證字段的規(guī)則
messages	object	驗證字段的提示信息

內(nèi)置校驗規(guī)則

序號	規(guī)則	描述
1	required: true	這是必填字段。
2	email: true	請輸入有效的電子郵件地址。
3	tel: true	請輸入11位的手機號碼。
4	url: true	請輸入有效的網(wǎng)址。
5	date: true	請輸入有效的日期。
6	dateISO: true	請輸入有效的日期（ISO），例如：2009-06-23，1998/01/22。
7	number: true	請輸入有效的數(shù)字。
8	digits: true	只能輸入數(shù)字。
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 的數(shù)值。
16	max: 10	請輸入不大于 10 的數(shù)值。
17	range: [5, 10]	請輸入范圍在 5 到 10 之間的數(shù)值。

常用實例方法

名稱	返回類型	描述
checkForm(e)	boolean	驗證所有字段的規(guī)則，返回驗證是否通過。
valid()	boolean	返回驗證是否通過。
size()	number	返回錯誤信息的個數(shù)。
validationErrors()	array	返回所有錯誤信息。
addMethod(name, method, message)	boolean	添加自定義驗證方法。

addMethod(name, method, message) - 添加自定義校驗

第一個參數(shù) name 是添加的方法的名字。 第二個參數(shù) method 是一個函數(shù)，接收三個參數(shù) (value, param) ，value 是元素的值，param 是參數(shù)。 第三個參數(shù) message 是自定義的錯誤提示。

使用說明

// 驗證字段的規(guī)則const rules = {
    email: {
        required: true,
        email: true,
    },
    tel: {
        required: true,
        tel: true,
    },
    idcard: {
        required: true,
        idcard: true,
    },
}// 驗證字段的提示信息，若不傳則調(diào)用默認的信息const messages = {
    email: {
        required: '請輸入郵箱',
        email: '請輸入正確的郵箱',
    },
    tel: {
        required: '請輸入手機號',
        tel: '請輸入正確的手機號',
    },
    idcard: {
        required: '請輸入身份證號碼',
        idcard: '請輸入正確的身份證號碼',
    },
}
// 創(chuàng)建實例對象
this.WxValidate = new WxValidate(rules, messages)
// 自定義驗證規(guī)則
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,
},// 調(diào)用驗證方法，傳入?yún)?shù) e 是 form 表單組件中的數(shù)據(jù)submitForm(e) {    
const params = e.detail.value

    console.log(params)    // 傳入表單數(shù)據(jù)，調(diào)用驗證方法
    if (!this.WxValidate.checkForm(e)) {        
    const error = this.WxValidate.errorList[0]        
    return false
    }
},

以上是“小程序中如何實現(xiàn)表單驗證”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：小程序中如何實現(xiàn)表單驗證-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/dihscc.html