小程序中如何實(shí)現(xiàn)表單驗(yàn)證

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

1. school.wxml:

<form bindsubmit='formSubmit'><view class="subInfo">
  <view class="subInfoItem clearfix">
    <text class="tag need">校區(qū)名稱</text>
    <input name='name' value='' placeholder='請輸入校區(qū)名稱' placeholder-class='placeholder'></input>
  </view>
  <view class="subInfoItem clearfix">
    <text class="tag">聯(lián)系電話</text>
    <input name='contactphone' value='' placeholder='請輸入聯(lián)系電話' 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({    // 初始化表單校驗(yàn)
    initValidate(){        // 創(chuàng)建實(shí)例對(duì)象
        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){        // 校驗(yàn)表單
        if (!this.validate.checkForm(e.detail.value)){            
        const error = this.validate.errorList[0];
            wx.showToast({
                title: `${error.msg} `,
                icon: 'none'
            })            
            return false
        }        // 保存操作...
    }
})

注:

WxValidate - 表單驗(yàn)證

插件介紹

該插件是參考 jQuery Validate 封裝的，為小程序表單提供了一套常用的驗(yàn)證規(guī)則，包括手機(jī)號(hào)碼、電子郵件驗(yàn)證等等，同時(shí)提供了添加自定義校驗(yàn)方法，讓表單驗(yàn)證變得更簡單。

參數(shù)說明

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

常用實(shí)例方法

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

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

使用說明

// 驗(yàn)證字段的規(guī)則const rules = {
    email: {
        required: true,
        email: true,
    },
    tel: {
        required: true,
        tel: true,
    },
    idcard: {
        required: true,
        idcard: true,
    },
}// 驗(yàn)證字段的提示信息，若不傳則調(diào)用默認(rèn)的信息const messages = {
    email: {
        required: '請輸入郵箱',
        email: '請輸入正確的郵箱',
    },
    tel: {
        required: '請輸入手機(jī)號(hào)',
        tel: '請輸入正確的手機(jī)號(hào)',
    },
    idcard: {
        required: '請輸入身份證號(hào)碼',
        idcard: '請輸入正確的身份證號(hào)碼',
    },
}
// 創(chuàng)建實(shí)例對(duì)象
this.WxValidate = new WxValidate(rules, messages)
// 自定義驗(yàn)證規(guī)則
this.WxValidate.addMethod('assistance', (value, param) => {    
return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
}, '請勾選1-2個(gè)敲碼助手')// 如果有個(gè)表單字段的 assistance，則在 rules 中寫assistance: {
    required: true,
    assistance: true,
},// 調(diào)用驗(yàn)證方法，傳入?yún)?shù) e 是 form 表單組件中的數(shù)據(jù)submitForm(e) {    
const params = e.detail.value

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

以上是“小程序中如何實(shí)現(xiàn)表單驗(yàn)證”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！