iview 表单 验证_记录 iView 的表单验证

iview表单验证必要设置

1. 给 Form 标签用 :model 绑定数据

2. 给 Form 标签里面必须添加 ref , 用于最后提交获取 Form 表单的实例

3. 给 Form 设置属性 rules :rules

4. 给需要验证的每个 FormItem 设置属性 prop , 用于表单验证和绑定属性一致

iview验证多个表单问题

export default {

methods:{

this.$refs.addForm.validate((valid) => {

//第一层验证第一个表单

if (valid) {

this.$refs.editForm.validate((valid) => {

//第二层验证第二个表单

if(valid){

alert('验证成功')

}

})

}

})

}

}

iview自定义表单验证

export default {

data() {

var validateName = function(rule, value, callback){

if(!value){

return callback(new Error("请输入名称"));

}else if(!/^[\u4e00-\u9fa5]+$/.test(value)){

return callback(new Error("请正确输入名称"))

}else{

callback();

}

};

return {

addForm:{

name:""

}

ruleValidate:{

name : [{validator : validateName , trigger : 'blur'}]

}

}

}

}

自定义的验证规则写在 data 里面，在 return 的 ruleValidate 指定字段 validator 里面调用；

trigger：触发机制(blur | change)

pattern：正则表达式

enum：验证字段是否存在其中

equired：是否为空(true | false)

whitespace：空白字符(true | false)

iview表单验证的类型

1. string (字符串/默认类型)

2. number (数字)

3. boolean (布尔类型)

4. method (函数)

5. float (浮点数)

6. integer (整数)

7. array (数组)

8. object (对象)

9. date (日期)

10. url (URL类型)

11. email (电子邮件类型)