记录 iView 的表单验证

• iview表单验证必要设置

 1. 给 Form 标签用 :model 绑定数据 
 2. 给 Form 标签里面必须添加 ref , 用于最后提交获取 Form 表单的实例
 3. 给 Form 设置属性 rules :rules
 4. 给需要验证的每个 FormItem 设置属性 prop , 用于表单验证和绑定属性一致 

• iview验证多个表单问题

<template>
    <Form ref="addForm" :model="addForm" :rules="addFormValidate" >
        <FormItem label="名称" prop="name">
            <Input v-model="addForm.name" />
        </FormItem>
    </Form>
    <Form ref="editForm" :model="editForm" :rules="editFormValidate" >
        <FormItem label="名称" prop="name">
            <Input v-model="editForm.name" />
        </FormItem>
    </Form>
</template>
<script>
  export default {
    methods:{
        this.$refs.addForm.validate((valid) => {
            //第一层验证第一个表单
            if (valid) {
                  this.$refs.editForm.validate((valid) => {
                       //第二层验证第二个表单
                       if(valid){
                            alert('验证成功')
                       }
                  })
             }
        })
     }
  }
</script>

• iview自定义表单验证

<template>
    <Form ref="addForm" :model="addForm" :rules="ruleValidate" >
        <FormItem label="名称" prop="name">
            <Input v-model="addForm.name" />
        </FormItem>
    </Form>
</template>
<script>
  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'}]
            }
        }
     }
  }
</script>

自定义的验证规则写在 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  （电子邮件类型）