we validator
v2.1.17
There are differences between 2.x and 1.x versions. If you continue to use the old version, you can check the 1.x version. If you want to upgrade to 2.x, please read the upgrade guide first. It is recommended to use version 2.x.
A simple and flexible form validation plug-in that supports mini programs, browsers, and Nodejs. The mini program supports: WeChat, Alipay, Baidu Smart, ByteDance, and the mini program prompts to use showToast by default.
API Documentation | Examples, if you? Just click ★Star .
Use npm:
npm install we-validator --saveUse cdn:
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > The following is the usage of WeChat mini program, other mini programs are similar
< 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的字符串'
} ,
} ,
} )
} ,
} ) You can also refer to the corresponding examples under the current project
Note: The configured rules will be verified only if the non-required fields have values.
| rule | describe | Default prompt |
|---|---|---|
required: true | Required | This field is required |
pattern: /^d+$/ | Regular general | Does not match this validation rule |
email: true | Email format | Please enter a valid email address |
mobile: true | 11-digit mobile phone number | Please enter your 11-digit mobile phone number |
tel: true | Landline number for example: 010-1234567, 0551-1234567 | Please enter your landline number |
url: true | URL | Please enter a valid URL |
idcard: true | ID number | Please enter a valid 18-digit ID card |
equalTo: 'field' | Field value verification, for example: password and confirm password, refer to | The input value must be the same as the field field |
notEqualTo: 'field' | Field values cannot be the same. Verification is the opposite of equalTo | The input value cannot be the same as field |
contains: 'str' | Whether it contains a certain character | The input value must contain str |
notContains: 'str' | cannot contain certain characters | The input value cannot contain str |
length: 5 | The length of the string | Please enter 5 characters |
minlength: 2 | Minimum length of string | At least 2 characters are required |
maxlength: 6 | Maximum length of string | You can enter up to 6 characters |
rangelength: [2, 6] | a string of a certain range of lengths | Please enter a length between 2 and 6 characters |
number: true | number | Please enter a valid number |
digits: true | positive integer number | Only positive integer numbers can be entered |
integer: true | Positive or negative integer number | Only integer numbers can be entered |
min: 3 | A number greater than a certain number (the minimum number is limited), you can also compare field values, refer to | Please enter a number greater than 3 |
max: 9 | A number less than a certain number (the maximum number can only be a certain number), you can also compare field values | Please enter a number less than 9 |
range: [3, 9] | Numbers greater than and less than | Please enter a number greater than 3 and less than 9 |
chinese: true | Chinese characters | Only Chinese characters can be entered |
minChinese: 3 | Minimum number of Chinese characters | Enter at least 3 Chinese characters |
maxChinese: 9 | Maximum number of Chinese characters | Enter up to 9 Chinese characters |
rangeChinese: [3, 9] | How many Chinese characters are greater than and less than | Only 3 to 9 Chinese characters can be entered |
date: true | Date ( new Date(value) is used for verification by default) | Please enter a valid date |
dateISO: true | Date (ISO standard format) For example: 2019-09-19, 2019/09/19 | Please enter a valid date (ISO standard format) |
ipv4: true | ipv4 address | Please enter a valid IPv4 address |
ipv6: true | ipv6 address | Please enter a valid IPv6 address |
Instantiate
Returns : object - validatorInstance
| parameter | type | default value | describe |
|---|---|---|---|
| options | object | ||
| [options.rules] | object | Rules for validating fields | |
| [options.messages] | object | Validation field error message | |
| [options.onMessage] | function | The error message display mode automatically detects the environment by default. The mini program uses showToast by defaultOrdinary web browsers use alert by defaultNodejs side does not do processing, it is recommended to configure it yourself, details | |
| [options.multiCheck] | boolean | false | Whether to verify multiple fields is used when multiple fields need to be verified at one time and error messages are displayed. Details |
const WeValidator = require ( 'we-validator' )
new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )Verify data, error messages will be displayed, and all field rules will be verified
Return : boolean
| parameter | type | default value | describe |
|---|---|---|---|
| data | object | Form data that needs to be verified | |
| onMessage | function | Custom error message prompt, details |
When verifying data, an error message will be displayed. Only the corresponding fields will be verified, for reference.
Usually used to verify one or more field rules individually
Return : boolean
| parameter | type | default value | describe |
|---|---|---|---|
| data | object | Form data that needs to be verified | |
| fields | array | Verification field rules, required. For example:['phoneNo'] only checks all rules for this field['phoneNo:required'] Only checks the required rules of this field['phoneNo:required,mobile'] only checks the required and mobile rules of this field['phoneNo', 'code'] only checks all rules of these two fields | |
| onMessage | function | Custom error message prompt, details |
Verify whether the data is valid and no error message will be prompted
Usage scenarios, for example: scenarios where certain fields in a form are verified and can only be clicked after the button is clicked, for reference.
Return : boolean
| parameter | type | default value | describe |
|---|---|---|---|
| data | object | Form data that needs to be verified | |
| fields | array | The fields to be checked are not passed. By default, all field rules are checked. If there are any, only the corresponding field rules are checked. The configuration method is the same as .checkFields(data, fields) |
Dynamically add field verification, reference
| parameter | type | default value | describe |
|---|---|---|---|
| options | object | Same as new WeValidator(options) , details |
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 : '手机号格式不正确'
}
}
} )Dynamically remove field validation, reference
| parameter | type | default value | describe |
|---|---|---|---|
| fields | array | Form fields that need to be removed from validation |
validatorInstance . removeRules ( [ 'username' ] ) Static method: add custom rules, refer to
| parameter | type | default value | describe |
|---|---|---|---|
| ruleName | string | Rule name | |
| ruleOption | object | Rule configuration | |
| [ruleOption.message] | string | The default error message text can be dynamically inserted into parameters, for example,请输入长度在{0} 到{1} 之间的字符, refer to | |
| [ruleOption.rule] | function|regexp | The rule verification function needs to return a boolean .You can also write a regular expression directly (if it is just a regular type verification). |
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' ) Static method: function verification
| parameter | type | default value | describe |
|---|---|---|---|
| ruleName | string | Rule name | |
| value | string | What needs to be verified | |
| param | any | Passed to rule parameters |
Supports all default supported rules and also supports custom rules.
// 必填
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 Custom error message prompt
You can configure one globally or individually, which is very flexible.
The priority is: .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > Default detection
Default message prompt method: Mini programs use showToast by default, browsers use alert by default, and there is no processing on the Nodejs side. It is recommended to configure it yourself.
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 )
} The usage scenarios are as follows, note: when multiCheck is true , it is recommended to use custom onMessage , refer to
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 : '手机号格式不正确'
}
}
} ) ; View changelog
If you find bugs during use or have good suggestions, please feel free to report them.
Copyright (c) 2019 ChanceYu
