Maison  >  Article  >  Applet WeChat  >  Développement de petits programmes : vérification de formulaire (code)

Développement de petits programmes : vérification de formulaire (code)

不言
不言original
2018-08-10 15:55:333142parcourir

Le contenu de cet article concerne le développement de petits programmes : la vérification de formulaire (code), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

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

Remarque :

WxValidate - Formulaire Validation

Introduction au plug-in

Ce plug-in est fourni en référence à jQuery Validate et fournit un ensemble de règles de validation couramment utilisées pour les formulaires de mini-programmes, notamment le numéro de téléphone mobile, la vérification des e-mails, etc., et fournit également des méthodes de validation personnalisées pour faciliter la validation du formulaire.

Description des paramètres

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

Règles de vérification intégrées

序号 规则 描述
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 之间的数值。

Méthodes d'instance communes

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

addMethod(name, method, message ) - Ajouter une vérification personnalisée

Le premier nom du paramètre est le nom de la méthode ajoutée. La deuxième méthode de paramètre est une fonction qui reçoit trois paramètres (value, param), value est la valeur de l'élément et param est le paramètre. Le troisième message de paramètre est un message d'erreur personnalisé.

Instructions d'utilisation

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

Recommandations associées :

Mini programme : Code pour implémenter le compte à rebours des clics

Composant mini-programme : introduction au composant de session de chat (avec code)

Implémentation de l'interaction entre le mini-programme et l'arrière-plan (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn