yolain/validation 是一款非常易用的JavaScript验证器,它的使用方式类似于PHP里Laravel Validation,它可以帮助我们更高效的验证表单和请求对象的规则。
我们从 Validatorjs Fork了下来,在不改动原始逻辑的前提下做了些输出错误的调整,以便我们更好地进行开发。
- 不依赖任何库
- 在浏览器和Nodejs中都可以工作
- 可读和声明性验证规则
- 支持多语言错误消息
- AMD公司/要求.js以及CommonJS/Browserify支持
npm install @yolain/validation
yarn add @yolain/validation
<script src="validator.js"></script>
// ES5
let Validator = require('@yolain/validation');
// ES6
import Validator from '@yolain/validation';
let validation = new Validator(data, rules ,[customErrorMessages]);
data {Object} - 传入你要验证的对象
rules {Object} - 验证规则对象
customErrorMessages {Object} - (可选)自定义错误信息返回
let data = {
name: 'John',
email: '[email protected]',
age: 28
};
let rules = {
name: 'required',
email: 'required|email',
age: 'min:18'
};
let validation = new Validator(data, rules);
validation.passes(); // true
validation.fails(); // false
若要将验证规则应用于 data 对象,请在 rule 对象下使用相同的键名。
let validation = new Validator({
name: 'D',
email: 'not an email address.com'
}, {
name: 'size:3',
email: 'required|email'
},{
name:'姓名',
email:'邮箱地址'
});
validation.fails(); // true
validation.passes(); // false
// 返回错误的文案 (原始)
validation.errors.first('email'); // '邮件格式不正确'
validation.errors.get('email'); // 返回一个所有邮件格式错误的数组
// 💡 返回错误的文案 (新增)
validation.errors.first(); // '姓名的长度必须等于3' <- 返回第一个出错的文案
validation.errors.all(true); // ['姓名的长度必须等于3','邮箱地址格式不正确'] <- 返回所有出错的文案数组
嵌套对象同样可以进行校验, 有两种方法可以声明嵌套对象的验证规则。第一种方法是使用反映数据的相应嵌套对象结构来声明验证规则。第二种方法是用扁平化的键名声明验证规则。例如,要验证以下数据:
let data = {
name: 'John',
bio: {
age: 28,
education: {
primary: '小学',
secondary: '中学'
}
}
};
我们可以声明我们的验证规则如下:
let nested = {
name: 'required',
bio: {
age: 'min:18',
education: {
primary: 'string',
secondary: 'string'
}
}
};
// OR
let flattened = {
'name': 'required',
'bio.age': 'min:18',
'bio.education.primary': 'string',
'bio.education.secondary': 'string'
};
通配符也可以进行校验
let data = {
users: [{
name: 'John',
bio: {
age: 28,
education: {
primary: '小学',
secondary: '中学'
}
}
}]
};
我们可以声明我们的通配符规则如下:
let rules = {
'users.*.name': 'required',
'users.*.bio.age': 'min:18',
'users.*.bio.education.primary': 'string',
'users.*.bio.education.secondary': 'string'
};
验证规则没有隐式 'required',如果字段是 undefined 或空字符串,则它将通过验证,如果希望未定义或“”的验证失败,请使用 required 规则
验证的字段必须是yes、on、1或true。这对于验证“服务条款”的接受是很有用的
验证的字段必须在给定日期之后
验证的字段必须在给定日期之后或当天
验证的字段必须完全是字母字符
验证的字段只能包含字母或数字,以及破折号和下划线
验证的字段必须完全是字母数字字符
验证的字段必须是数组
验证的字段必须在给定日期之前。
验证的字段必须早于或当天
验证的字段的大小必须介于给定的最小值和最大值之间。字符串、数字和文件的计算方式与大小规则相同
验证的字段必须是形式为 true、false、0、1、"true”、“false”、“0”、“1” 的布尔值
验证字段必须有一个匹配的 foo_confirmation 字段。例如,如果验证下的字段是 password,则输入中必须存在匹配的 password_confirmation 字段
验证字段必须是Javascript “date” 对象的有效日期格式
验证字段必须是数字,并且必须具有精确的值长度
验的字段必须是数字,并且长度必须介于给定的最小值和最大值之间
给定字段必须与验证字段不同
验证字段的格式必须为电子邮件地址
验证字段应为十六进制格式。与其他规则(如hex)结合使用时非常有用 hex|size:6
用于十六进制颜色代码验证。
验证字段必须包含在给定的值列表中,该字段可以是数组或字符串
验证字段必须为整数值。
验证值不能超过给定大小
Note: Maximum checks are inclusive.
验证值不能少于给定大小
Note: Minimum checks are inclusive.
验证字段不能包含在给定的值列表中
验证值是否为数值,数字的字符串表示将通过
验证字段必须存在于输入数据中,但可以为空
验证字段必须存在于输入数据中,且不可以为空
如果另一个字段等于任何值,则验证的字段必须存在且不为空
验证的段必须存在且不为空,除非另一个字段等于任何值
只有在其他指定字段存在时,验证的字段必须存在且不为空
只有当所有其他指定字段都存在时,验证的字段必须存在且不为空
只有在任何其他指定字段不存在时,验证的字段必须存在且不为空
只有当所有其他指定字段都不存在时,验证的字段必须存在且不为空
给定字段必须与验证字段匹配
验证字段的大小必须与给定值匹配
验证字段必须是字符串。
验证属性是否具有有效的URL格式
验证字段必须与给定的正则表达式匹配
注意:使用“regex”模式时,可能需要在数组中指定规则,而不是使用 "|" 分隔符,尤其是当正则表达式包含 "|" 字符时。
对于正则表达式模式中使用的每个反斜杠,必须用另一个反斜杠对每个反斜杠进行转义。
let validation = new Validator({
name: 'Doe',
salary: '10,000.00',
yearOfBirth: '1980'
}, {
name: 'required|size:3',
salary: ['required', 'regex:/^(?!0\\.00)\\d{1,3}(,\\d{3})*(\\.\\d\\d)?$/'],
yearOfBirth: ['required', 'regex:/^(19|20)[\\d]{2,2}$/']
});
validation.fails(); // false
validation.passes(); // true
let validation = new Validator({
age: 30,
name: ''
}, {
age: ['required', { 'in': [29, 30] }],
name: [{ required_if: ['age', 30] }]
});
validation.fails(); // true
validation.passes(); // false
Validator.register(name, callbackFn, errorMessage);
name {String} - 规则名称
callbackFn {Function} - 回调函数返回表示验证成功或失败的布尔值。
errorMessage {String} - 一个可选字符串,您可以在其中指定自定义错误消息。:attribute 在errorMessage中将替换为属性名称。
Validator.register('telephone', function(value, requirement, attribute) { // requirement parameter defaults to null
return value.match(/^\d{3}-\d{3}-\d{4}$/);
}, 'The :attribute phone number is not in the format XXX-XXX-XXXX.');
注册接受“passes”回调的异步规则:
Validator.registerAsync('username_available', function(username, attribute, req, passes) {
// do your database/api checks here etc
// then call the `passes` method where appropriate:
passes(); // if username is available
passes(false, 'Username has already been taken.'); // if username is not available
});
然后使用 checkAsync
通过failes
和passes
回调调用验证器,如下所示:
let validator = new Validator({
username: 'test123'
}, {
username: 'required|min:3|username_available'
});
function passes() {
// Validation passed
}
function fails() {
validator.errors.first('username');
}
validator.checkAsync(passes, fails);
构造函数将为失败的验证规则自动生成错误消息。
如果有错误,验证器实例将会把所有验证失败的错误消息添加到 errors 对象中。 errors 对象可使用的方法和属性有以下:
返回第一条错误消息,否则为false
返回属性的错误消息数组,如果没有错误,则返回空数组
返回一个包含所有错误消息的对象
如果属性存在错误消息,则返回true,否则返回false
验证错误数
let validation = new Validator(input, rules);
// 返回错误的文案 (原始)
validation.errors.first('email'); // '邮件格式不正确'
validation.errors.get('email'); // 返回一个所有邮件格式错误的数组
// 返回错误的文案 (新增)
validation.errors.first(); // '姓名的长度必须等于3' <- 返回第一个出错的文案
validation.errors.all(true); // ['姓名的长度必须等于3','邮箱地址格式不正确'] <- 返回所有出错的文案数组
如果您需要一个特定的错误消息,并且不想重写默认的错误消息,那么可以覆盖第三个参数传递给Validator对象,就像 Laravel.
let input = {
name: ''
};
let rules = {
name : 'required'
};
let validation = new Validator(input, rules, { required: 'You forgot to give a :attribute' });
validation.errors.first('name'); // returns 'You forgot to give a name'
一些验证器字段需要配置 string 和 numeric,你同意可以这样覆盖它
let input = {
username: 'myusernameistoolong'
};
let rules = {
username : 'max:16'
};
let validation = new Validator(input, rules, {
max: {
string: 'The :attribute is too long. Max length is :max.'
}
});
validation.errors.first('username'); // returns 'The username is too long. Max length is 16.'
您甚至可以根据每个属性提供错误消息!只需将消息的键设置为'验证器.属性'
let input = { name: '', email: '' };
let rules = { name : 'required', email : 'required' };
let validation = new Validator(input, rules, {
"required.email": "Without an :attribute we can't reach you!"
});
validation.errors.first('name'); // returns 'The name field is required.'
validation.errors.first('email'); // returns 'Without an email we can\'t reach you!'
New 新增 +
上述方式并不能很好的运用于实际项目中,于是我们新增了只需根据'属性'就可以更改错误信息的方式。
通过 '属性':'需要被替换的:attribute名称' 输出错误,参考如下:
let input = { name: '小明', email: '[email protected]' };
let rules = { name : 'required', email : 'required|email' };
let validation = new Validator(input, rules, {
"email": "邮箱地址"
});
validation.errors.first(); // 返回'邮箱地址格式不正确'
当然我们也可以通过 '属性':{'验证属性':'自定义错误文案','text':'其他属性被替换的:attribute名称''} 输出错误,参考如下:
let input = { name: '小明', email: '[email protected]' };
let rules = { name : 'required', email : 'required|min:8|email' };
let validation = new Validator(input, rules, {
"email":{min:'Email长度不符合',text:'邮箱地址'}
});
validation.errors.all(true); // 返回 ['Email长度不符合','邮箱地址格式不正确']
要在错误消息中显示自定义的“友好”属性名,请使用.setAttributeNames()
let validator = new Validator({ name: '' }, { name: 'required' });
validator.setAttributeNames({ name: 'custom_name' });
if (validator.fails()) {
validator.errors.first('name'); // "The custom_name field is required."
}
或者,您可以使用language中的 “attributes” 属性提供全局自定义属性名。
还可以配置自定义属性格式化程序:
// Configure global formatter.
Validator.setAttributeFormatter(function(attribute) {
return attribute.replace(/_/g, ' ');
});
// Or configure formatter for particular instance.
let validator = new Validator({ first_name: '' }, { first_name: 'required' });
validator.setAttributeFormatter(function(attribute) {
return attribute.replace(/_/g, ' ');
});
if (validator.fails()) {
console.log(validator.errors.first('first_name')); // The first name field is required.
}
注意:默认情况下,所有 _ 的字符都将替换为空格。
默认情况下,错误消息为英语。若要在浏览器中包含其他语言,请在脚本标记中引用该语言文件并调用 Validator.useLang('lang_code')
.
<script src="dist/validator.js"></script>
<script src="dist/lang/ru.js"></script>
<script>
Validator.useLang('es');
</script>
在 Node中它将自动拾取语言源文件
let Validator = require('@yolain/validation');
Validator.useLang('zh');
如果您没有看到对您的语言的支持,请添加一个到src/lang
!
您还可以通过调用setMessages
:
Validator.setMessages('lang_code', {
required: 'The :attribute field is required.'
});
获取给定语言的消息的原始对象:
Validator.getMessages('lang_code');
切换验证器使用的默认语言:
Validator.useLang('lang_code');
获取正在使用的默认语言:
Validator.getDefaultLang(); // returns e.g. 'en'
重写语言的默认消息:
let messages = Validator.getMessages('en');
messages.required = 'Whoops, :attribute field is required.';
Validator.setMessages('en', messages);
Copyright © 2012-2019 David Tang Released under the MIT license
validatorjs created by David Tang validatorjs maintained by Mike Erickson and Contributors
E-Mail: [email protected]
Twitter: @codedungeon
Website: codedungeon.io