Development of small programs: form verification (code)-Mini Program Development-php.cn

Development of small programs: form verification (code)

不言

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

Original

3177 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

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!