Entwicklung kleiner Programme: Formularverifizierung (Code)

Der Inhalt dieses Artikels befasst sich mit der Entwicklung kleiner Programme: Formularüberprüfung (Code), der einen gewissen Referenzwert hat. Ich hoffe, er wird für Sie hilfreich sein.

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 '../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
        }        // 保存操作...
    }
})

Hinweis:

WxValidate – Formularvalidierung

Plug-in-Einführung

Dieses Plug-in ist mit Bezug auf jQuery Validate gepackt. Es bietet eine Reihe häufig verwendeter Validierungsregeln für Miniprogrammformulare, einschließlich Mobiltelefonnummer, E-Mail-Verifizierung usw. Außerdem besteht die Möglichkeit, eine benutzerdefinierte Validierungsmethode hinzuzufügen, um die Formularvalidierung zu vereinfachen.

Parameterbeschreibung

参数	类型	描述
rules	object	验证字段的规则
messages	object	验证字段的提示信息

Eingebaute Verifizierungsregeln

序号	规则	描述
1	required: true	这是必填字段。
2	email: true	请输入有效的电子邮件地址。
3	tel: true	请输入11位的手机号码。
4	url: true	请输入有效的网址。
5	date: true	请输入有效的日期。
6	dateISO: true	请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。
7	number: true	请输入有效的数字。
8	digits: true	只能输入数字。
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 的数值。
16	max: 10	请输入不大于 10 的数值。
17	range: [5, 10]	请输入范围在 5 到 10 之间的数值。

Gemeinsame Instanzmethoden

名称	返回类型	描述
checkForm(e)	boolean	验证所有字段的规则，返回验证是否通过。
valid()	boolean	返回验证是否通过。
size()	number	返回错误信息的个数。
validationErrors()	array	返回所有错误信息。
addMethod(name, method, message)	boolean	添加自定义验证方法。

addMethod(name, method, message ) – Benutzerdefinierte Überprüfung hinzufügen

Der erste Parametername ist der Name der hinzugefügten Methode. Die zweite Parametermethode ist eine Funktion, die drei Parameter empfängt (Wert, Parameter). Wert ist der Wert des Elements und Parameter ist der Parameter. Die dritte Parametermeldung ist eine benutzerdefinierte Fehlermeldung.

Gebrauchsanweisung

// 验证字段的规则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)
}, &#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
    }
},

Verwandte Empfehlungen:

Miniprogramm: Code zur Implementierung des Klick-Countdowns

Mini-Programmkomponente: Einführung in die Chat-Sitzungskomponente (mit Code)

Implementierung der Interaktion zwischen dem Miniprogramm und dem Hintergrund (mit Code)

Das obige ist der detaillierte Inhalt vonEntwicklung kleiner Programme: Formularverifizierung (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!