애플릿 개발:양식 검사

WxValidate.js 다운로드:https://download.csdn.net/download/lx_nhs/10595083
1. school.wxml:

<form bindsubmit='formSubmit'>
<view class="subInfo">
  <view class="subInfoItem clearfix">
    <text class="tag need">    text>
    <input name='name' value='' placeholder='       ' placeholder-class='placeholder'>input>
  view>
  <view class="subInfoItem clearfix">
    <text class="tag">    text>
    <input name='contactphone' value='' placeholder='       ' placeholder-class='placeholder'>input>
  view>
view>
<view class='btnWrap'>
  <button class='saveBtn' form-type='submit'>  button>
view>
form>

2.school.js:

import WxValidate from '../utils/classes/WxValidate.js'
var validate;

Page({
    //        
    initValidate(){
        //       
        this.validate = new WxValidate({
            name: {
                required: true,
                maxlength: 20
            },
            contactphone: {
                tel: true
            }
        }, {
                name: {
                    required: '       !',
                    maxlength: '      20 !'
                },
                contactphone: {
                    tel: '       !'
                }
            })
    },
    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: 'none'
            })
            return false
        }
        //     ...
    }
})

참고:
WxValidate - 양식 유효성 검사
플러그인 소개
이 플러그인은 jQuery Validate를 참고하여 봉인된 것으로 애플릿 폼에 자주 사용하는 검증 규칙을 제공합니다. 핸드폰 번호, 이메일 검증 등을 포함하고 사용자 정의 검사 방법을 추가하여 폼 검증을 더욱 간단하게 합니다.
매개변수 설명
매개 변수
타입
묘사
rules object
필드 유효성 검사 규칙
messages object
유효성 검사 필드에 대한 프롬프트 정보
검사 규칙 내장
번호
규칙.
묘사
1 required: true
필수 필드입니다.
2 email: true
올바른 e-메일 주소를 입력하십시오.
3 tel: true
11자리 핸드폰 번호를 입력하세요.
4 url: true
올바른 웹 주소를 입력하십시오.
5 date: true
올바른 날짜를 입력하십시오.
6 dateISO: true
유효한 날짜(ISO)를 입력하십시오(예: 2009-06-231998/01/22).
7 number: true
올바른 숫자를 입력하십시오.
8 digits: true
숫자만 입력할 수 있습니다.
9 idcard: true
올바른 신분증 18개를 입력하십시오.
10 equalTo: '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 사이의 값을 입력하십시오.
상용 실례 방법
이름:
반환 유형
묘사
checkForm(e) boolean
모든 필드의 규칙을 검증하고 검증이 통과되었는지 되돌려줍니다.
valid() boolean
검증이 통과되었는지 되돌려줍니다.
size() number
오류 메시지의 개수를 되돌려줍니다.
validationErrors() array
모든 오류 메시지를 반환합니다.
addMethod(name, method, message) boolean
사용자 정의 검증 방법을 추가합니다.
addMethod(name, method, message) - 사용자 정의 검사 추가
첫 번째 인자name은 추가하는 방법의 이름입니다.두 번째 매개 변수method는 함수로 세 개의 매개 변수(value,param)를 수신하고value는 요소의 값이며param은 매개 변수이다.세 번째 매개 변수 메시지는 사용자 정의 오류 알림입니다.
사용 설명

//        
const rules = {
    email: {
        required: true,
        email: true,
    },
    tel: {
        required: true,
        tel: true,
    },
    idcard: {
        required: true,
        idcard: true,
    },
}

//          ，           
const messages = {
    email: {
        required: '     ',
        email: '        ',
    },
    tel: {
        required: '      ',
        tel: '         ',
    },
    idcard: {
        required: '        ',
        idcard: '           ',
    },
}

//       
this.WxValidate = new WxValidate(rules, messages)

//        
this.WxValidate.addMethod('assistance', (value, param) => {
    return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
}, '   1-2     ')

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