iview表单验证的步骤
- 第一步：给 Form 设置属性 rules
:rules="规则设置"
- 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
- 第三步：注意：Form标签里面是 :model
- 第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效
- 第五步：在操作保存按钮时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败。
位置
一般位置是在 Data()里面
data() return { editInfoValidate:{
contractNo:[
{ required: true, message: '合同编号不能为空', trigger: 'blur' },
]
} }
也可以放在 和new Vue 一个层级,这样变成全局验证
还可以放在FormItem 里(不推荐)
<FormItem
prop="UserId"
:rules=" [
{ required: true, message: '请选择一项', trigger: 'change',type:'number',min:1},
]"
>
<Select v-model="formAddOrder.UserId" filterable @on-change="selectUser">
<Option v-for="(item,index) in userList" :value="item.UserId" :label="item.name" :key="index" >
<span>{{item.name}}</span>
</Option>
</Select>
</FormItem>
例子
//methods里面，写的方式
editInfoValidate: {
CityId: [ { required: true, message: ' ? ', type: 'number' },
{ type: 'string',pattern:/^(([1-9]d{0,3})|0)(.d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},],
Title: [ { required: true, message: ''},
{type: 'string', max: 5, message: '',trigger: 'blur'} ,
]
},
////methods里面，写的方式
addChange(name){
this.$refs[name].validate(valid => {
if (valid) {
}
});
1.2 FormItem 添加验证 prop="name"
支持的类型
type:'string'
string: 必须是字符串类型。这是默认类型
number: 必须是数字
boolean: 必须是布尔型的
method:必须是类型函数
regexp: 必须是ReGEXP的实例，或者是在创建新的ReGEXP时不会生成异常的字符串
integer:必须是整数.
float:必须是浮点数.
array: 必须是由Array.isArray确定的数组
object: 必须是类型对象而不是Array.isArray
enum: 枚举中必须存在值。
date: 按日期确定的值必须有效
url: 必须是URL类型。
hex: 必须是十六进制。
email:必须是电子邮件类型。
pattern: schema.pattern.email
{ type: 'number', message: '', trigger: 'blur', transform(value) {
return Number(value);
}
内置的验证规则
required: true
pattern :正则表达式
min: 6 //最小值6
max:10// 最大值10
Length : 长度
enum: 验证字段是否存在其中
enum: 验证字段是否存在其中
{ message:'不包含a , u, g',trigger: 'change',type: 'enum',enum: ['a', 'u', 'g']}
whitespace : true | false
true:空白字符 ->错误提醒
false: 空白字符->不报错
设置提示
message:'提示信息'
设置事件
trigger : 'change' | 'blur'
trigger: 'blur'
iview进行多重验证的写法：
ruleValidate: {
goodsNum: [
{ required: true, message: '数量不能为空', trigger: 'blur' },
{ type: 'string',pattern:/^(([1-9]d{0,3})|0)(.d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'},
],
}
2.2 自定义验证
方式1
// 定义
data() {
const validatePass = (rule, value, callback) => {
var passex = /^(?=.*d)(?=.*[a-zA-Z])(?!.*s).{8,22}$/;
if (value === "" || !passex.test(value)) {
callback(new Error("密码不能为空且为8-22位的字母和数字组合"));
} else {
if (this.changePassForm.TwoPassWord !== "") {
// 对第二个密码框单独验证
this.$refs.changePass.validateField("TwoPassWord");
}
callback();
}
};
return {}
使用
validaterules: {
OldPassWord: [
{
type: "string",
required: true,
message: "请输入原始密码",
trigger: "blur"
}
],
NewPassword: [
{
required: true,
validator: validatePass,//注意这里
trigger: "blur"
}
]
}
{validator(rule, value, callback, source, options) {
var errors = [];
if (!/^[a-z0-9]+$/.test(value)) {
callback(' ? ?...');
}
callback(errors);
}}
全局的验证,例子
new Vue({
el: '#addModule',
data(){
var validateuser = function(rule, value, callback){
if(!value){
return callback(new Error(" ? "));
}else if(!/^[a-zA-Zd]+$/.test(value)){
return callback(new Error(" ? ? "))
}else{
callback();
}
};
return{
ruleValidate:{
username : [{validator: validateuser,trigger: 'blur'}],
nick : [{validator: validatenick,trigger: 'blur'}],
password : [{validator: validatePass, trigger: 'blur' },{min:6,message:' ? ?}],
rpassword : [{validator: validatePassCheck, trigger: 'blur' },{min:6,message:' ? ?}],
group:[{required: true, type: 'string', message: ' ? ', trigger: 'change'}]
}