小程序中如何實現表單驗證

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

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 封裝的，為小程序表單提供了一套常用的驗證規則，包括手機號碼、電子郵件驗證等等，同時提供了添加自定義校驗方法，讓表單驗證變得更簡單。

參數說明

內置校驗規則

常用實例方法

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

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