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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!