小程式的開發：表單的驗證(程式碼)-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

小程式的開發：表單的驗證(程式碼)

不言

Aug 10, 2018 pm 03:55 PM

小程式表單校驗

這篇文章帶給大家的內容是關於小程式的開發：表單的驗證(程式碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1. school.wxml:

<form bindsubmit=&#39;formSubmit&#39;><view class="subInfo">
  <view class="subInfoItem clearfix">
    <text class="tag need">校区名称</text>
    <input name=&#39;name&#39; value=&#39;&#39; placeholder=&#39;请输入校区名称&#39; placeholder-class=&#39;placeholder&#39;></input>
  </view>
  <view class="subInfoItem clearfix">
    <text class="tag">联系电话</text>
    <input name=&#39;contactphone&#39; value=&#39;&#39; placeholder=&#39;请输入联系电话&#39; placeholder-class=&#39;placeholder&#39;></input>
  </view></view><view class=&#39;btnWrap&#39;>
  <button class=&#39;saveBtn&#39; form-type=&#39;submit&#39;>保存</button></view></form>

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

參數說明

##描述rules驗證欄位的規則messages驗證欄位的提示訊息

參數	類型
	object
	object

#內建校驗規則

序號規則描述#1這是必填欄位。 2#請輸入有效的電子郵件地址。 3#請輸入11位元的手機號碼。 4#請輸入有效的網址。 5請輸入有效的日期。 6請輸入有效的日期（ISO），例如：2009-06-23 ，1998/01/22。 7請輸入有效的數字。 8只能輸入數字。 9請輸入18位元的有效身分證。 10輸入值必須和 field 相同。 11輸入值必須包含 ABC。 12最少要輸入 5 個字元。 13最多可以輸入 10 個字元。 14請輸入長度在 5 到 10 之間的字元。 15#請輸入不小於 5 的數值。 16#請輸入不大於 10 的數值。 17請輸入範圍在 5 到 10 之間的數值。


	required: true
	email: true
	tel: true
	url: true
	date: true
	dateISO: true
	number: true
	digits: true
	idcard: true
	equalTo: 'field'
	contains: 'ABC'
	minlength: 5
	maxlength: 10
	rangelength: [5, 10]
	min: 5
	max: 10
	range: [5, 10]

常用實例方法

#名稱傳回類型描述checkForm(e)驗證所有欄位的規則，傳回驗證是否通過。 valid()#傳回驗證是否通過。 size()#傳回錯誤訊息的數量。 validationErrors()傳回所有錯誤訊息。 addMethod(name, method, message)新增自訂驗證方法。


	#boolean
	boolean
	number
	array
	#boolean

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