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