we validator
v2.1.17
توجد اختلافات بين الإصدارين 2.x و1.x. إذا واصلت استخدام الإصدار القديم، فيمكنك التحقق من الإصدار 1.x. إذا كنت تريد الترقية إلى الإصدار 2.x، فيرجى قراءة دليل الترقية أولاً. ومن المستحسن استخدام الإصدار 2.x.
مكون إضافي بسيط ومرن للتحقق من صحة النماذج يدعم البرامج الصغيرة والمتصفحات وNodejs. يدعم البرنامج المصغر: WeChat، وAlipay، وBaidu Smart، وByteDance، ويطالب البرنامج المصغر باستخدام showToast افتراضيًا.
وثائق واجهة برمجة التطبيقات |. إذا كنت تريد ذلك، فما عليك سوى النقر على ★Star .
استخدم نبم:
npm install we-validator --saveاستخدم سي دي إن:
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > فيما يلي استخدام برنامج WeChat mini، والبرامج المصغرة الأخرى مشابهة
< 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 القياسي) على سبيل المثال: 19-09-2019، 19/09/2019 | الرجاء إدخال تاريخ صالح (تنسيق ISO القياسي) |
ipv4: true | عنوان IPv4 | الرجاء إدخال عنوان IPv4 صالح |
ipv6: true | عنوان IPv6 | الرجاء إدخال عنوان IPv6 صالح |
إنشاء مثيل
العوائد : object - validatorInstance
| المعلمة | يكتب | القيمة الافتراضية | يصف |
|---|---|---|---|
| خيارات | object | ||
| [خيارات.قواعد] | object | قواعد التحقق من صحة الحقول | |
| [خيارات.رسائل] | object | رسالة خطأ في حقل التحقق من الصحة | |
| [خيارات.على الرسالة] | function | يكتشف وضع عرض رسالة الخطأ البيئة تلقائيًا بشكل افتراضي. يستخدم البرنامج المصغر showToast بشكل افتراضيتستخدم متصفحات الويب العادية alert بشكل افتراضيجانب Nodejs لا يقوم بالمعالجة، يوصى بتكوينه بنفسك، التفاصيل | |
| [خيارات.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 | بيانات النموذج التي تحتاج إلى التحقق منها | |
| onMessage | function | رسالة خطأ مخصصة، التفاصيل |
عند التحقق من البيانات، سيتم عرض رسالة خطأ، وسيتم التحقق من الحقول المقابلة فقط كمرجع.
يُستخدم عادةً للتحقق من قاعدة حقل واحدة أو أكثر بشكل فردي
العودة : boolean
| المعلمة | يكتب | القيمة الافتراضية | يصف |
|---|---|---|---|
| بيانات | object | بيانات النموذج التي تحتاج إلى التحقق منها | |
| الحقول | array | قواعد حقل التحقق، مطلوبة، على سبيل المثال:['phoneNo'] يتحقق فقط من جميع القواعد الخاصة بهذا الحقل['phoneNo:required'] يتحقق فقط من القواعد required لهذا الحقل['phoneNo:required,mobile'] يتحقق فقط من القواعد required mobile لهذا الحقل['phoneNo', 'code'] يتحقق فقط من جميع قواعد هذين الحقلين | |
| onMessage | 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 | اسم القاعدة | |
| RuleOption | object | تكوين القاعدة | |
| [ruleOption.message] | string | يمكن إدراج نص رسالة الخطأ الافتراضية ديناميكيًا في المعلمات، على سبيل المثال،请输入长度在{0} 到{1} 之间的字符، راجع | |
| [ruleOption.rule] | 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 : '手机号格式不正确'
}
}
} ) ; عرض سجل التغيير
إذا وجدت أخطاء أثناء الاستخدام أو كانت لديك اقتراحات جيدة، فلا تتردد في الإبلاغ عنها.
حقوق الطبع والنشر (ج) 2019 ChanceYu
