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

转载于:https://juejin.im/post/5cd3bf526fb9a0324b27d71f