在检验规则的代码中,我们可以看到规则对象中包含required/message/trigger/min/max等参数,这些参数配合起来,可以完成我们以往要编写多行代码才能实现的校验功能。
type
表明要使用验证器的类型,类似数据格式检验,其中还有email、url、regexp、method等特定格式字段的验证。
使用这个,我们就可以对一些特定的字段进行校验,而不用再像以前一样写正则,做判断。
比如只需要配置 type:‘email’ 的规则就可以验证email了,验证器都已经封装好了这些功能,你只需调用就可以了。
可识别的类型值有:
//验证电子邮箱的完整示例代码
email = [{
type: "string",
required: true,
message: '请输入邮箱地址',
trigger: 'blur'
},
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
]
如上,实现了文本框失去焦点进行非空检验,失去焦点、内容改变进行格式验证,并给出相应提示.
必填字段,即非空验证。如上面实例中的的非空验证,以及邮箱前边的必填符号*,就是这个参数的功劳。
正则表达式,如果需要验证手机号码之类,可以直接编写正则表达式配置到校验规则中,那么就不需要自己去校验了,由校验器自动校验。
{ type : "string" , required: true , pattern : /^[a-z]+$/ }
判断数据大小范围,通常对数字大小范围做校验。对于字符串和数组类型,将根据长度进行比较。
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
len
roles: {
type: "array", required: true, len: 11
}
取值为blur/change, blur失去焦点时触发,change:值发生改变时触发
role: {type: "enum", enum: ['admin', 'user', 'guest']}
验证是否只有空格(如果没有该配置,则全空格的输入值也是有效的)。
whitespace: [{
type: "string",
message: '只存在空格',
whitespace:true,
trigger: ['change', 'blur']
}]
有时有必要在验证之前转换值,以强制或以某种方式对其进行清理。为此 transform ,向验证规则添加一个功能。在验证之前,先转换属性,然后将其重新分配给源对象,以更改该属性的值。
transform: [
{
type: 'enum',
enum: [2,4,6],
message: `结果不存在`,
trigger: ['change', 'blur'],
transform(value) {
return Number(value * 2)
}
}
]
如上,只有输入1、2、3的时候才能校验通过,这个只能辅助校验,并不能改变组件绑定变量本身的值。
深层规则,可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则,如地址对象的省市区的规则验证:
object类型:
address: {
type: "object", required: true,
fields: {
street: {type: "string", required: true},
city: {type: "string", required: true},
zip: {type: "string", required: true, len: 8, message: "invalid zip"}
}
}
array类型:
roles: {
type: "array", required: true, len: 3,
fields: {
0: {type: "string", required: true},
1: {type: "string", required: true},
2: {type: "string", required: true}
}
}
{name:{type: "string", required: true, message: "Name is required"}}
{name:{type: "string", required: true, message: "<b>Name is required</b>"}}
{name:{type: "string", required: true, message: () => this.$t( 'name is required' )}}
可以为指定字段自定义验证函数——这就相当于把前边配置的东西用js按照以前的方式编写验证逻辑了。虽然麻烦点,但是能实现比较复杂的业务逻辑判断。
data(){
var checkPass= (rules,value,callback) =>{
if(value ==''){
callback(new Error('请输入密码'));
}else{
callback();
}
}
return{
rules:{
pass:[vaildatot:checkPass,trigger:blur]
}
}
}
原文地址:https://blog.csdn.net/changwen17/article/details/129057065
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_37786.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!