we validator
v2.1.17
มีความแตกต่างระหว่างเวอร์ชัน 2.x และ 1.x หากคุณยังคงใช้เวอร์ชันเก่าต่อไป คุณสามารถตรวจสอบเวอร์ชัน 1.x ได้ หากคุณต้องการอัพเกรดเป็น 2.x โปรดอ่านคู่มือการอัพเกรดก่อน ขอแนะนำให้ใช้เวอร์ชั่น 2.x
ปลั๊กอินตรวจสอบความถูกต้องของแบบฟอร์มที่เรียบง่ายและยืดหยุ่น ซึ่งรองรับมินิโปรแกรม เบราว์เซอร์ และ Nodejs มินิโปรแกรมรองรับ: WeChat, Alipay, Baidu Smart, ByteDance และมินิโปรแกรมแจ้งให้ใช้ showToast ตามค่าเริ่มต้น
เอกสาร API | . ตัวอย่าง หากคุณ?
ใช้เวลาต่อนาที:
npm install we-validator --saveใช้ซีดีเอ็น:
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > ต่อไปนี้คือการใช้งานมินิโปรแกรม WeChat ส่วนมินิโปรแกรมอื่นๆ ก็คล้ายกัน
< form bindsubmit =" onSubmitForm " >
< input type =" text " name =" username " placeholder ="用户名" />
< input type =" number " name =" phoneno " placeholder ="手机号" />
< input type =" text " name =" str " placeholder ="长度为3的字符串" />
< button type =" default " formType =" submit " >提交</ button >
</ form > const WeValidator = require ( 'we-validator' )
Page ( {
onReady ( ) {
this . initValidator ( )
} ,
onSubmitForm ( e ) {
let { value } = e . detail
if ( ! this . validatorInstance . checkData ( value ) ) return
// 开始提交表单
// wx.request
} ,
initValidator ( ) {
// 实例化
this . validatorInstance = new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
} ,
str : {
length : 3
} ,
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
} ,
str : { // 非必填字段
length : '请输入长度为3的字符串'
} ,
} ,
} )
} ,
} ) คุณยังสามารถอ้างอิงถึงตัวอย่างที่เกี่ยวข้องภายใต้โปรเจ็กต์ปัจจุบันได้
หมายเหตุ: กฎที่กำหนดค่าไว้จะได้รับการตรวจสอบก็ต่อเมื่อฟิลด์ที่ไม่จำเป็นมีค่าเท่านั้น
| กฎ | อธิบาย | พรอมต์เริ่มต้น |
|---|---|---|
required: true | ที่จำเป็น | ต้องระบุข้อมูลในช่องนี้ |
pattern: /^d+$/ | ทั่วไปทั่วไป | ไม่ตรงกับกฎการตรวจสอบนี้ |
email: true | รูปแบบอีเมล | กรุณากรอกที่อยู่อีเมลที่ถูกต้อง |
mobile: true | หมายเลขโทรศัพท์มือถือ 11 หลัก | กรุณากรอกหมายเลขโทรศัพท์มือถือ 11 หลักของคุณ |
tel: true | หมายเลขโทรศัพท์บ้าน เช่น 010-1234567, 0551-1234567 | กรุณากรอกหมายเลขโทรศัพท์บ้านของคุณ |
url: true | URL | โปรดป้อน URL ที่ถูกต้อง |
idcard: true | หมายเลขประจำตัวประชาชน | กรุณากรอกบัตรประจำตัวประชาชน 18 หลักที่ถูกต้อง |
equalTo: 'field' | การตรวจสอบค่าฟิลด์ เช่น รหัสผ่าน และยืนยันรหัสผ่าน โปรดดูที่ | ค่าอินพุตจะต้องเหมือนกับฟิลด์ field |
notEqualTo: 'field' | ค่าฟิลด์ไม่สามารถเหมือนกันได้ การตรวจสอบจะตรงกันข้ามกับ equalTo | ค่าอินพุตต้องไม่เหมือนกับ field |
contains: 'str' | ไม่ว่าจะมีตัวละครบางตัวหรือไม่ | ค่าอินพุตต้องมี str |
notContains: 'str' | ไม่สามารถมีอักขระบางตัวได้ | ค่าอินพุตไม่สามารถมี str |
length: 5 | ความยาวของสตริง | กรุณากรอก 5 ตัวอักษร |
minlength: 2 | ความยาวขั้นต่ำของสตริง | ต้องมีอักขระอย่างน้อย 2 ตัว |
maxlength: 6 | ความยาวสูงสุดของสตริง | คุณสามารถป้อนอักขระได้สูงสุด 6 ตัว |
rangelength: [2, 6] | สตริงที่มีความยาวช่วงหนึ่ง | กรุณากรอกความยาวระหว่าง 2 ถึง 6 ตัวอักษร |
number: true | ตัวเลข | กรุณากรอกตัวเลขที่ถูกต้อง |
digits: true | จำนวนเต็มบวก | สามารถป้อนได้เฉพาะตัวเลขจำนวนเต็มบวกเท่านั้น |
integer: true | จำนวนเต็มบวกหรือลบ | สามารถป้อนได้เฉพาะตัวเลขจำนวนเต็มเท่านั้น |
min: 3 | ตัวเลขที่มากกว่าตัวเลขที่กำหนด (จำนวนขั้นต่ำถูกจำกัด) คุณยังสามารถเปรียบเทียบค่าของฟิลด์ได้ โดยอ้างอิงถึง | โปรดป้อนตัวเลขที่มากกว่า 3 |
max: 9 | ตัวเลขที่น้อยกว่าตัวเลขที่กำหนด (จำนวนสูงสุดสามารถเป็นตัวเลขที่แน่นอนได้เท่านั้น) คุณยังสามารถเปรียบเทียบค่าของฟิลด์ได้อีกด้วย | กรุณากรอกตัวเลขที่น้อยกว่า 9 |
range: [3, 9] | จำนวนที่มากกว่าและน้อยกว่า | โปรดป้อนตัวเลขที่มากกว่า 3 และน้อยกว่า 9 |
chinese: true | ตัวอักษรจีน | สามารถป้อนได้เฉพาะตัวอักษรจีนเท่านั้น |
minChinese: 3 | จำนวนตัวอักษรจีนขั้นต่ำ | กรอกตัวอักษรจีนอย่างน้อย 3 |
maxChinese: 9 | จำนวนตัวอักษรจีนสูงสุด | ป้อนตัวอักษรจีนได้สูงสุด 9 |
rangeChinese: [3, 9] | มีตัวอักษรจีนกี่ตัวที่มากกว่าและน้อยกว่า | สามารถป้อนตัวอักษรจีนได้เพียง 3 ถึง 9 เท่านั้น |
date: true | วันที่ ( new Date(value) ใช้สำหรับการตรวจสอบตามค่าเริ่มต้น) | กรุณากรอกวันที่ที่ถูกต้อง |
dateISO: true | วันที่ (รูปแบบมาตรฐาน ISO) ตัวอย่างเช่น: 2019-09-19, 2019/09/19 | โปรดป้อนวันที่ที่ถูกต้อง (รูปแบบมาตรฐาน ISO) |
ipv4: true | ที่อยู่ IPV4 | โปรดป้อนที่อยู่ IPv4 ที่ถูกต้อง |
ipv6: true | ที่อยู่ IPV6 | โปรดป้อนที่อยู่ IPv6 ที่ถูกต้อง |
ยกตัวอย่าง
ส่งคืน : object - validatorInstance
| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| ตัวเลือก | object | ||
| [ตัวเลือกกฎ] | object | กฎสำหรับการตรวจสอบฟิลด์ | |
| [ตัวเลือก.ข้อความ] | object | ข้อความแสดงข้อผิดพลาดของฟิลด์การตรวจสอบ | |
| [options.onMessage] | function | โหมดแสดงข้อความแสดงข้อผิดพลาดจะตรวจจับสภาพแวดล้อมโดยอัตโนมัติตามค่าเริ่มต้น มินิโปรแกรมใช้ showToast เป็นค่าเริ่มต้นเว็บเบราว์เซอร์ทั่วไปใช้ alert เป็นค่าเริ่มต้นฝั่ง Nodejs ไม่ได้ทำการประมวลผล ขอแนะนำให้กำหนดค่าด้วยตัวเอง รายละเอียด | |
| [options.multiCheck] | boolean | false | จะใช้การตรวจสอบหลายช่องหรือไม่เมื่อจำเป็นต้องตรวจสอบหลายช่องในคราวเดียวและมีการแสดงข้อความแสดงข้อผิดพลาด |
const WeValidator = require ( 'we-validator' )
new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )ตรวจสอบข้อมูล ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น และกฎของฟิลด์ทั้งหมดจะได้รับการตรวจสอบ
กลับ : boolean
| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| ข้อมูล | object | ข้อมูลแบบฟอร์มที่ต้องตรวจสอบ | |
| บนข้อความ | function | พร้อมท์ข้อความแสดงข้อผิดพลาดแบบกำหนดเอง รายละเอียด |
เมื่อตรวจสอบข้อมูล ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้นเฉพาะฟิลด์ที่เกี่ยวข้องเท่านั้นที่จะได้รับการตรวจสอบเพื่อใช้อ้างอิง
โดยปกติจะใช้เพื่อตรวจสอบกฎของฟิลด์ตั้งแต่หนึ่งกฎขึ้นไปทีละรายการ
กลับ : boolean
| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| ข้อมูล | object | ข้อมูลแบบฟอร์มที่ต้องตรวจสอบ | |
| สาขา | array | ต้องมีกฎช่องการยืนยัน เช่น['phoneNo'] จะตรวจสอบกฎทั้งหมดสำหรับฟิลด์นี้เท่านั้น['phoneNo:required'] ตรวจสอบเฉพาะกฎ required ของฟิลด์นี้เท่านั้น['phoneNo:required,mobile'] ตรวจสอบเฉพาะกฎ required และกฎ mobile ของฟิลด์นี้['phoneNo', 'code'] จะตรวจสอบกฎทั้งหมดของทั้งสองฟิลด์นี้เท่านั้น | |
| บนข้อความ | function | พร้อมท์ข้อความแสดงข้อผิดพลาดแบบกำหนดเอง รายละเอียด |
ตรวจสอบว่าข้อมูลถูกต้องหรือไม่และจะไม่แสดงข้อความแสดงข้อผิดพลาด
สถานการณ์การใช้งาน เช่น: สถานการณ์ที่มีการตรวจสอบฟิลด์บางฟิลด์ในแบบฟอร์มและสามารถคลิกได้หลังจากคลิกปุ่มแล้วเท่านั้น สำหรับการอ้างอิง
กลับ : boolean
| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| ข้อมูล | object | ข้อมูลแบบฟอร์มที่ต้องตรวจสอบ | |
| สาขา | array | ฟิลด์ที่จะตรวจสอบจะไม่ถูกส่งผ่าน ตามค่าเริ่มต้น กฎของฟิลด์ทั้งหมดจะถูกตรวจสอบ หากมี จะมีการตรวจสอบเฉพาะกฎของ .checkFields(data, fields) ที่เกี่ยวข้องเท่านั้น |
เพิ่มการตรวจสอบฟิลด์ข้อมูลอ้างอิงแบบไดนามิก
| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| ตัวเลือก | object | เช่นเดียวกับรายละเอียด new WeValidator(options) |
const WeValidator = require ( 'we-validator' )
const validatorInstance = new WeValidator ( {
rules : {
username : {
required : true
}
} ,
messages : {
username : {
required : '请输入用户名'
}
}
} )
// 动态添加校验
validatorInstance . addRules ( {
rules : {
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )ลบการตรวจสอบฟิลด์ข้อมูลอ้างอิงแบบไดนามิก
| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| สาขา | array | ฟิลด์แบบฟอร์มที่ต้องลบออกจากการตรวจสอบ |
validatorInstance . removeRules ( [ 'username' ] ) วิธีการคงที่: เพิ่มกฎที่กำหนดเอง โปรดดูที่
| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| กฎชื่อ | string | ชื่อกฎ | |
| กฎตัวเลือก | object | การกำหนดค่ากฎ | |
| [ruleOption.ข้อความ] | string | ข้อความข้อความแสดงข้อผิดพลาดเริ่มต้นสามารถแทรกแบบไดนามิกลงในพารามิเตอร์ได้ ตัวอย่างเช่น请输入长度在{0} 到{1} 之间的字符โปรดดูที่ | |
| [ruleOption.กฎ] | function|regexp | ฟังก์ชันการตรวจสอบกฎต้องส่งคืน booleanคุณยังสามารถเขียนนิพจน์ทั่วไปได้โดยตรง (หากเป็นเพียงการตรวจสอบประเภทปกติ) |
const WeValidator = require ( 'we-validator' )
// 添加自定义规则（这两种写法一样）
WeValidator . addRule ( 'theRuleName' , {
message : '默认错误信息文字' ,
rule ( value , param ) {
return / d / . test ( value )
}
} )
WeValidator . addRule ( 'theRuleName' , {
message : '默认错误信息文字' ,
rule : / d /
} )
// 使用方式一，实例化
new WeValidator ( {
rules : {
field1 : {
theRuleName : true
}
} ,
messages : {
field1 : {
theRuleName : '提示信息'
}
}
} )
// 使用方式二，调用函数
WeValidator . checkValue ( 'theRuleName' , 'str' ) วิธีการคงที่: การตรวจสอบฟังก์ชัน
| พารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| กฎชื่อ | string | ชื่อกฎ | |
| ค่า | string | สิ่งที่ต้องมีการตรวจสอบ | |
| พารามิเตอร์ | any | ส่งผ่านไปยังพารามิเตอร์กฎ |
รองรับกฎที่รองรับเริ่มต้นทั้งหมดและยังรองรับกฎที่กำหนดเองอีกด้วย
// 必填
let b1 = WeValidator . checkValue ( 'required' , 'str' ) // true
// 不能小于6的数字
let b2 = WeValidator . checkValue ( 'min' , 'str' , 6 ) // false
// 大于2小于5的数字
let b3 = WeValidator . checkValue ( 'range' , 'str' , [ 2 , 5 ] ) // false พร้อมท์ข้อความแสดงข้อผิดพลาดแบบกำหนดเอง
คุณสามารถกำหนดค่าแบบโกลบอลหรือแบบแยกก็ได้ ซึ่งมีความยืดหยุ่นมาก
ลำดับความสำคัญคือ: .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > การตรวจหาเริ่มต้น
วิธีการแจ้งข้อความเริ่มต้น: มินิโปรแกรมใช้ showToast เป็นค่าเริ่มต้น เบราว์เซอร์ใช้ alert ตามค่าเริ่มต้น และไม่มีการประมวลผลในฝั่ง Nodejs ขอแนะนำให้กำหนดค่าด้วยตนเอง
const WeValidator = require ( 'we-validator' )
// 1、全局配置
WeValidator . onMessage = function ( data ) {
/*
data 参数
{
msg, // 提示文字
name, // 表单控件的 name
value, // 表单控件的值
param // rules 验证字段传递的参数
}
*/
}
// 2、实例化配置
new WeValidator ( {
rules : { } ,
message : { } ,
onMessage : function ( data ) {
alert ( data . msg )
}
} )
// 3、验证的时候配置 onMessage（nodejs端校验可以使用此方式）
if ( ! obj . checkData ( formData , onMessage ) ) return
function onMessage ( data ) {
alert ( data . msg )
} สถานการณ์การใช้งานมีดังนี้ หมายเหตุ: เมื่อ multiCheck เป็น true ขอแนะนำให้ใช้ onMessage แบบกำหนดเอง โปรดดูที่
var validatorInstance = new WeValidator ( {
multiCheck : true ,
onMessage : function ( data ) {
console . log ( data ) ;
// 根据自己的项目去处理，控制错误信息的显示
} ,
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} ) ; ดูบันทึกการเปลี่ยนแปลง
หากคุณพบข้อบกพร่องระหว่างการใช้งานหรือมีข้อเสนอแนะที่ดี โปรดรายงานข้อผิดพลาดเหล่านั้นได้ตามสบาย
ลิขสิทธิ์ (c) 2019 ChanceYu
