Home  >  Article  >  WeChat Applet  >  Development of small programs: form verification (code)

Development of small programs: form verification (code)

不言
不言Original
2018-08-10 15:55:333116browse

The content of this article is about the development of small programs: form verification (code), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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

Note:

WxValidate - Form Validation

Plug-in introduction

This plug-in is packaged with reference to jQuery Validate. It provides a set of commonly used validation rules for mini program forms, including mobile phone number, email verification, etc., and also provides the ability to add custom validation Validation method to make form validation easier.

Parameter Description

Parameter Type Description
rules object Rules for validating fields
messages object Prompt information for verification fields

Built-in verification rules

Serial number Rule Description
1 required: true This is a required field.
2 email: true Please enter a valid email address.
3 tel: true Please enter your 11-digit mobile phone number.
4 url: true Please enter a valid URL.
5 date: true Please enter a valid date.
6 dateISO: true Please enter a valid date (ISO), for example: 2009-06-23 , 1998/01/22.
7 number: true Please enter a valid number.
8 digits: true Only numbers can be entered.
9 idcard: true Please enter your 18-digit valid ID card.
10 equalTo: 'field' The input value must be the same as field.
11 contains: 'ABC' The input value must contain ABC.
12 minlength: 5 You must enter at least 5 characters.
13 maxlength: 10 You can enter up to 10 characters.
14 rangelength: [5, 10] Please enter a length of characters between 5 and 10.
15 min: 5 Please enter a value not less than 5.
16 max: 10 Please enter a value no greater than 10.
17 range: [5, 10] Please enter a value between 5 and 10.

Common instance methods

Name Return type Description
checkForm(e) boolean Verify the rules of all fields and return whether the verification is passed .
valid() boolean Returns whether the verification is passed.
size() number Returns the number of error messages.
validationErrors() array Returns all error messages.
addMethod(name, method, message) boolean Add a custom verification method.

addMethod(name, method, message) - Add custom verification

The first parameter name is the name of the added method. The second parameter method is a function that receives three parameters (value, param), value is the value of the element, and param is the parameter. The third parameter message is a custom error message.

Instructions for use

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

Related recommendations:

Mini Program: Code to implement click countdown

Mini program component: Introduction to the chat session component (with code)

Implementation of interaction between the mini program and the background (with code)

The above is the detailed content of Development of small programs: form verification (code). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn