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

Development of small programs: form verification (code)

不言
Release: 2018-08-10 15:55:33
Original
3186 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

ParameterTypeDescription
rulesobjectRules for validating fields
messagesobjectPrompt information for verification fields

Built-in verification rules

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

Common instance methods

NameReturn typeDescription
checkForm(e)boolean Verify the rules of all fields and return whether the verification is passed .
valid()booleanReturns whether the verification is passed.
size()number Returns the number of error messages.
validationErrors()array Returns all error messages.
addMethod(name, method, message)booleanAdd 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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template