yiminghe / async-validator Goto Github PK
View Code? Open in Web Editor NEWvalidate form asynchronous
License: MIT License
validate form asynchronous
License: MIT License
如下代码:
const Schema = require("async-validator")
const obj = {
value: '',
test: [{
name: 'aa',
}],
};
const descriptor = {
test: {
type: 'array',
min: 2,
required: true,
message: '至少两项',
defaultField: [{
type: 'object',
required: true,
message: 'test 必须有',
fields: {
name: { type: 'string', required: true, message: 'name 必须有' },
},
}],
},
};
const validator = new Schema(descriptor);
validator.validate(obj, (errors, fields) => {
console.log(errors, fields);
});
运行中会校验出 obj 的 test 数组长度不符合要求,但后续的 defaultField 的校验导致之前的 errors 丢失,最终 log 结果为 null。但,如果 defaultField 的校验没通过,所有的 errors 会正确返回,不会丢失。
在线重现连接:
https://runkit.com/583e9f2905d1c70014aa94da/583e9f2905d1c70014aa94db
<Form onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="产品编号"
hasFeedback
>
{
getFieldDecorator('productNum', {
rules: [
{
type: 'number',
message: 'The input is not valid 产品编号!'
},
{
required: true,
message: 'Please input your 产品编号!'
}
],
})(
<Input type="number"/>
)
}
</FormItem>
<Form onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="产品编号"
hasFeedback
>
{
getFieldDecorator('productNum', {
rules: [
{
required: true,
message: 'Please input your 产品编号!'
}
],
})(
<Input type="number"/>
)
}
</FormItem>
modal中表单验证失败,如果用户选择关闭modal,我需要清除失败的验证信息。请问有开放相关的接口吗?
{ type: 'regexp', pattern: /^1[0-9]{10}$|^[569][0-9]{7}$/, message: '请填写正确的手机号码' },
校验的写法有问题吗?校验没有任何效果
<Validation>
<Validator rules=...>
// insert input later .
</Validator>
</Validation>
页面加载后,元素已经正常回显,但是仍然提示验证错误!!!
export function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
Right now it's not possibly to use numbers as strings.
{getFieldDecorator('price', {
rules: [{
required: true,
message: '必填'
},{
type: 'number',
message: '请输入数字'
},{
validator(rule, value, callback){
if(value<20){
callback(['出金金额必须大于或等于20'])
}else if(value < this.props.balance_price){ // 这里
callback(['你的余额不足'])
}
else{
callback([])
}
}
}]
})(
<InputNumber/>
)}
需求是统一加上required。但是其中有下拉框(值为number),也有输入框(值为string),此时该怎么定义验证规则呢?尝试的方案有:
{type:'regexp',required:true,message: '请输入正则表达式', trigger: 'blur'}
这样写没有验证效果。请问应该怎么使用?
vm.propertyList.forEach(function(e){
vm.$set(vm.addRule,e.code,[{ required: true, message:'这是必填项', trigger: 'blur', pattern: /^.*$/ }]);
})
如上代码,验证规则是动态遍历添加的,然后在元素加载出来的会出现错误提示,怎么才能取消?急求助啊
Error: Unknown rule type object,string
rules="{'type':['object', 'string']}"
getType: function getType(rule) {
if (rule.type === undefined && rule.pattern instanceof RegExp) {
rule.type = 'pattern';
}
if (typeof rule.validator !== 'function' && rule.type && !_validator2["default"].hasOwnProperty(rule.type)) {
throw new Error((0, _util.format)('Unknown rule type %s', rule.type));
}
return rule.type || 'string';
}
在使用校验的时候经常用到
rules: [{
// required 也必须配置 type: number =。=
type: 'number',
required: true
}]
但是这里却要强制指定类型才能完成require校验。后端经常会因为这个小问题来问为什么校验不成功
在 required:true
的校验中,根据value的类型来判断是
在 es/index.js 中引入 import {error} from './rule/',rule/index.js 中不存在 ~
这种表单为什么验证不了呢,就算我输入的是正确的值,然后我点按钮,我在输入正确代码加了这个console.log('ok'),但是我实际输入正确的时候,并没有弹出'ok'~
请问该怎么解决呢?
开发中需要用到一个功能,就是动态的决定是否校验某一个文本框的内容是否合法。
研究了一下其他网友的方案,建议每一个写成自定义规则,但是发现每一个都写成自定义规则感觉有点麻烦,个人觉得可以增加一个类似 toggle 的属性,这个属性接受一个 Boole值或者一个方法 ,用来动态的决定是否 启用这个 校验规则,类似这样:
//接受一个 Boole
toggle:true,
又或者像这样接受一个 function
//接受一个 function
toggle:function(){
//这里的条件可能是一个非常复杂的逻辑运算结果
if(this.abc === 123 ){
return true;
}else{
return false;
}
},
typeof value = number or Array 的情况下
正常:
rules: [{ required:true }]
出错:一直提示不能为空
rules: [{ required:true, message: 不能为空 }]
https://github.com/yiminghe/async-validator/blob/master/src/index.js#L236
if (keys.length === 1 && keys[0] === 'required') {
return validators.required;
}
这里判断 keys.length === 1 应该改成 > 0
{ required: true }
假如传入的值是number,则报错,称类型不是string。实际上我只希望验证required ,不验证type.
怎么自动忽略输入的空格
Hi, what about file validation ? I mean add type "file" for file validation or add type "image" for image validation. What you think about that ?
I've just followed your example to override default error messages :
var Schema = require('async-validate')
, messages = require('async-validate/messages')
, descriptor = {
type: 'object',
fields: {
name:{type: "string", required: true}}
}
}
, schema;
messages.required = "%s is a required field";
schema = new Schema(descriptor, {messages: messages});
In my case, I don't wan't to display field name in error message, so this is what I've done :
messages.required = "This field is required";
But when I'm validating a field (let say "product"), I've got this final error message :
{
"errors": [ {
"field": "product",
"key": "product",
"message": "This field is required product"
} ]
}
Can't we avoid field name to be concatenated into final error message ?
建议在定义descriptor的时候,对某一个字段可以有一个default选择,指定这个字段的默认值。
type url 部分的正则自支持校验带协议头的 url,目前集团有相当一批系统产出的 图片 url 等是不附带协议头的 //xxxx
的 url,此时会无法通过校验。
需要修改一下 url 的校验规则,使其支持无协议头的 url。
value=0的时候检测不出来
it('works for number=0', (done) => {
new Schema({
v: {
required,
},
}).validate({
v: 0,
}, (errors) => {
expect(errors.length).to.be(1);
expect(errors[0].message).to.be('v is required');
done();
});
我用r.js打包index文件 生成一个文件压缩js, 在到组件中引用,页面加载了压缩的js但是会出现
Uncaught TypeError: AsyncValidator is not a constructor,在页面中我是这样调用的 var validator = new AsyncValidator(descriptor);
比如有些表单默认是隐藏的非必填,显示了required才是true,动态赋值没有用
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="提现金额" prop="money">
<el-input v-model="form.money"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form:{
money:null,
},
rules: {
money: [
{ required: true, message: '请输入提现金额', trigger: 'blur' },
{ type:"number", message: '请输入正确的提现金额', trigger: 'blur' }
]
}
}
}
</script>
输入数字校验不正确,提示 请输入正确的提现金额
修改源码lib/rule/type.js
第56行为
return typeof +value === 'number';
则可以通过验证。
示例如下:
const descriptor = {
testArray: {
type: 'array',
min: 2,
message: 'test',
required: true,
defaultField: {...},
},
};
const record = {
testArray: [],
};
const validator = new Schema(descriptor);
validator.validate(record, (errors, fields) => {
console.log(errors, fields);
});
descriptor 中对数组 testArray
字段配置校验,同时配置 defaultField
规则。
这种情况下,如果被校验的数组为空数组,回调不会被执行。即示例中的 console.log(errors, fields);
不会执行。
ie9input框的值不会被删除,这个怎么解决啊。这个不知道到底是饿了么封装的bug还是组件问题导致的。
http://element.eleme.io/#/zh-CN/component/form
请看饿了么的demo
Can you make email be case insensitive?!
var array = ["google.com", "wrong", "youtube.com"]
There is a way to validate specific fields of an array:
var descriptor = {
roles: {
type: "array", required: true,
fields: {
0: {type: "url"},
1: {type: "url"},
2: {type: "url"}
}
}
}
Is there a way to validate all fields of an array?
var descriptor = {
roles: {
type: "array", required: true,
allFields: {type: "url"}
}
}
async-validator 用到了 lodash.mergewith, 而 lodash.mergewith又依赖了 lodash._baseclone、lodash._root、lodash.isplainobject、lodash.keysin、lodash.rest
因为mergewith的使用使得整个包的体检增长不少。
next这边正在针对包比较大做排查工作,lodash是其中一部分,而错误校验用到了async-validator,所以希望能够给async-validator瘦身下。
I'm trying to add you're project to webjars but it's being rejected because the license line in package.json is incorrect. It should be "license": "MIT"
not "licenses": "MIT"
.
Very simple fix but then everyone using webjars could use your library.
使用antDesign中的DatePicker时,如果设置校验规则为required:true,那么不管是否有值,都无法通过校验
I use <Input>
as file upload component. But in the validator(rule, value, callback)
, rule.type
always be string
.
So, can you guys support file
type?
错误信息提示只能显示在输入框的下面吗?有没有控制提示位置参数,或者关掉错误提示通过验证回调函数的方式提示? 感觉文档可以写全点。。。。。
ant design中验证有问题, 比如我对“title”属性验证,国际化消息是“%s不能为空”
那么验证失败的消息为 "title不能为空";
我发现可以指定fullField,如果校验规则中配置 fullField:"标题",这样失败消息就是“标题不能为空”
此时又出现一个bug,第一次校验可用,但是不做任何修改,继续提交再次校验时,antdesign不会对之前校验的再次校验,会把之前的错误拿过来。但是title属性的错误是用fullField标志的,所以拿不到错误。
就任务校验全部通过了。
可以通过以下方式来解决:
field: oe.field || rule.fullField
改成field: rule.field || rule.fullField
如题
尤其和antd-mobile的表单组件一起使用,手机上输入电话号,手机号的场景还是比较常见的,并且antd-mobile 的InputItem组件是有 type=“phone”的设置,这时候如果能和校验一起使用,那是极好的。省的自己写正则。
ps: antd-mobile 设置type="phone" 的时候,,表单里的取值是 包含空格的,比如 “130 000 0000”,所以校验的时候,容易有问题。不知道是 antd-mobile改进还是在validator这进行适配。? 这个也是我现在遇到的问题之一,我自己在其他地方使用的正则表达式,直接用pattern放到这里,是不能使用,因为前面所说的空格问题。
多谢大神!
https://github.com/yiminghe/async-validator#transform
rules 数组的每一个 item 想要的转化操作可能是不相同的,如果是有修改原值的 transform,还要把之前的操作给 de-transform 回去,能否提供一个 map 处理,作用域只保留在是 rules 当前的 item
1.7.1 版本升级为 ES6 模块导出,导致依赖模块时,使用 CommonJs 方式导入模块出错,强烈不建议在小版本做这样升级,也希望能够在 Readme 更新使用方式
请问一下你们这个 rule 下面的 触发trigger 可以自定义事件吗 ,我是用的element-ui 的文件上传组件, 想对上传后返回的参数做一个校验。看了你们的源码 貌似没有看到自定义 trigger 的地方。
rules: {
location: [
{ required: true, type:"array", message: '请选择注册所在地', trigger: 'blur' },
{ type:"array", message: '参数类型错误'}
],
checked: [
{ validator: checkbox, message: '请勾选 已阅读《契约锁服务协议》', trigger: 'blur' }
],
uploadFileKey:[
{ required: true, message: "请上传授权委托书" }
]
如题:该校验模块 没有看到远程校验的规则?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.