소규모 프로그램 개발 : 양식검증(코드)

이 글의 내용은 작은 프로그램 개발에 관한 것입니다: 양식 검증(코드)은 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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 '../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 - Form Validation

플러그인 소개

이 플러그인은 jQuery Validate를 참조하여 패키지되어 있으며 다음을 제공합니다. 미니 프로그램 양식 휴대폰 번호, 이메일 확인 등 일반적으로 사용되는 확인 규칙 집합이며, 양식 확인을 더 쉽게 하기 위해 사용자 지정 확인 방법을 추가하는 기능도 제공합니다.

매개변수 설명

Parameter	Type	Description
rules	objectobject	验证字段的规则
messages	object	验证字段的提示信息

内置校验规则

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

常用实例方法

필드 유효성 검사 규칙mes 현자

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

객체

검증 필드에 대한 프롬프트 정보

내장 검증 규칙

일련 번호

RuleDescription

🎜1🎜 🎜필수: true code >🎜🎜필수항목입니다. 🎜🎜🎜🎜2🎜🎜email: true🎜🎜유효한 이메일 주소를 입력하세요. 🎜🎜🎜🎜3🎜🎜tel:true🎜🎜휴대폰번호 11자리를 입력해주세요. 🎜🎜🎜🎜4🎜🎜url: true🎜🎜유효한 URL을 입력하세요. 🎜🎜🎜🎜5🎜🎜날짜: true🎜🎜유효한 날짜를 입력하세요. 🎜🎜🎜🎜6🎜🎜dateISO: true🎜🎜유효한 날짜(ISO)를 입력하세요. 예: 2009-06-23, 1998/01/22. 🎜🎜🎜🎜7🎜🎜숫자: true🎜🎜유효한 숫자를 입력하세요. 🎜🎜🎜🎜8🎜🎜숫자: true🎜🎜숫자만 입력할 수 있습니다. 🎜🎜🎜🎜9🎜🎜idcard: true🎜🎜유효한 신분증 18자리를 입력해주세요. 🎜🎜🎜🎜10🎜🎜equalTo: 'field'🎜🎜입력 값은 필드와 동일해야 합니다. 🎜🎜🎜🎜11🎜🎜contains: 'ABC'🎜🎜입력 값에는 ABC가 포함되어야 합니다. 🎜🎜🎜🎜12🎜🎜최소 길이: 5🎜🎜5자 이상 입력해야 합니다. 🎜🎜🎜🎜13🎜🎜최대 길이: 10🎜🎜최대 10자까지 입력할 수 있습니다. 🎜🎜🎜🎜14🎜🎜범위 길이: [5, 10]🎜🎜5~10자 사이의 문자 길이를 입력하세요. 🎜🎜🎜🎜15🎜🎜최소: 5🎜🎜5 이상의 값을 입력하세요. 🎜🎜🎜🎜16🎜🎜최대: 10🎜🎜10 이하의 값을 입력하세요. 🎜🎜🎜🎜17🎜🎜범위: [5, 10]🎜🎜5~10 사이의 값을 입력하세요. 🎜🎜🎜🎜🎜공통 인스턴스 메소드🎜🎜🎜🎜🎜Name🎜🎜반환 유형🎜🎜Description🎜🎜🎜🎜🎜🎜checkForm(e)🎜🎜boolean🎜🎜Vali 모든 필드 규칙에 날짜를 지정하고 확인을 반환합니다. 통과했다. 🎜🎜🎜🎜valid()🎜🎜boolean🎜🎜인증 통과 여부를 반환합니다. 🎜🎜🎜🎜size()🎜🎜number🎜🎜는 오류 메시지 수를 반환합니다. 🎜🎜🎜🎜validationErrors()🎜🎜배열🎜🎜모든 오류 메시지를 반환합니다. 🎜🎜🎜🎜addMethod(이름, 메소드, 메시지)🎜🎜boolean🎜🎜맞춤 확인 방법을 추가하세요. 🎜🎜🎜🎜🎜addMethod(name, method, message) - 사용자 정의 검증 추가🎜🎜첫 번째 매개변수 이름은 추가된 메소드의 이름입니다. 두 번째 매개변수 메소드는 3개의 매개변수(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)
}, &#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
    }
},

🎜관련 권장 사항: 🎜🎜🎜미니 프로그램: 클릭 카운트다운을 구현하는 코드🎜🎜🎜🎜미니 프로그램 구성 요소: 채팅 세션 구성 요소 소개(코드 포함) 🎜🎜🎜배경과 상호 작용하는 미니 프로그램 구현(코드 포함)🎜🎜🎜

위 내용은 소규모 프로그램 개발 : 양식검증(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!