이 글의 내용은 작은 프로그램 개발에 관한 것입니다: 양식 검증(코드)은 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
<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>
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 | object object | 验证字段的规则 |
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 之间的数值。 |
常用实例方法
名称 | 返回类型 | 描述 |
---|---|---|
checkForm(e) | boolean | 验证所有字段的规则,返回验证是否通过。 |
valid() | boolean | 返回验证是否通过。 |
size() | number | 返回错误信息的个数。 |
validationErrors() | array | 返回所有错误信息。 |
addMethod(name, method, message) | boolean | 필드 유효성 검사 규칙
<코드> 객체
검증 필드에 대한 프롬프트 정보
내장 검증 규칙🎜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) }, '请勾选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 } },
위 내용은 소규모 프로그램 개발 : 양식검증(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!