Entwicklung kleiner Programme: Formularverifizierung (Code)-Mini-Programmentwicklung-php.cn

Entwicklung kleiner Programme: Formularverifizierung (Code)

不言

Freigeben： 2018-08-10 15:55:33

Original

3178 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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: &#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
    }
},

Nach dem Login kopieren

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!