记录-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（电子邮件类型）