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