小程序中如何實(shí)現(xiàn)表單驗(yàn)證-創(chuàng)新互聯(lián)

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

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

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í)例對象
        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ī)號碼、電子郵件驗(yàn)證等等，同時(shí)提供了添加自定義校驗(yàn)方法，讓表單驗(yàn)證變得更簡單。

參數(shù)說明

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

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

序號	規(guī)則	描述
1	`required: true`	這是必填字段。
2	`email: true`	請輸入有效的電子郵件地址。
3	`tel: true`	請輸入11位的手機(jī)號碼。
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 個(gè)字符。
13	`maxlength: 10`	最多可以輸入 10 個(gè)字符。
14	`rangelength: [5, 10]`	請輸入長度在 5 到 10 之間的字符。
15	`min: 5`	請輸入不小于 5 的數(shù)值。
16	`max: 10`	請輸入不大于 10 的數(shù)值。
17	`range: [5, 10]`	請輸入范圍在 5 到 10 之間的數(shù)值。

常用實(shí)例方法

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

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ī)號',
        tel: '請輸入正確的手機(jī)號',
    },
    idcard: {
        required: '請輸入身份證號碼',
        idcard: '請輸入正確的身份證號碼',
    },
}
// 創(chuàng)建實(shí)例對象
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)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：小程序中如何實(shí)現(xiàn)表單驗(yàn)證-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://bm7419.com/article22/dihscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、品牌網(wǎng)站制作、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容