Vue+Element UI表单组件简单验证及二层验证

基本表单验证：

基本的表单验证需要ref，rules，prop三个关键要素

<template>
	<div>
		<el-form :model="form" :rules="rules" ref="ruleForm">	
            <!-- 第二个rules为自定义的验证规则，命名可自定义 
			  -- ref为组件的注册信息，用于进行表单验证或清除验证，命名可自定义 -->
			<el-form-item label="自定义表单选项名称" prop="data_A">
                <!-- 此处prop不需要进行绑定v-bind/:,否则可能出现报错类型1 -->
                <el-input v-model.number="form.data_A"></el-input>
                <!-- v-model的修饰符number意为让该字段默认为number类型
				  -- 与验证规则type：number对应
                  -- 双向绑定字段要和prop字段保持一致，否则验证不成功 -->
			</el-form-item> 
			<el-form-item>
				<el-button type="primary" @click="onSubmit('ruleForm')">验证</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
export default {
	data() {
		return {
			form: {
				data_A: '',
			},
			rules: {
				data_A: [{
                    type: 'number', 
                    //type类型必须为number，小写
                    required: true, 
                    //必传
                    message: '请输入', 
                    //验证失败时的提示信息
                    trigger: 'blur' }
                    //触发条件
                    ],
			}
		};
	},
	methods: {
		onSubmit(formName) {	//触发验证
			this.$refs[formName].validate(valid => {
                //验证通过调用validate获取验证结果，validate参数为一个callback
                //valid为验证结果，Boolean值，仅验证成功时为true
				if (valid) {
					this.$message.success('ok');
				} else {
					this.$message.error('error');
				}
			});
		},
		resetForm(formName) {	//触发重置
			this.$refs[formName].resetFields();//重置验证结果
		}
	}
};
</script>

rules验证规则的参数:

1. 是否必须： required:true|| fasle
2. 根据正则表达式验证： pattern:
3. 最大长度和最小长度： min和max
4. 数据转换：transform（value）{return}
5. 自定义校验功能：validador:fn(rule, value, callback);
6. 触发规则:trigger:blur|change
7. 自带验证类型： type:
   1. string：必须是类型string
   2. number：必须是类型number。
   3. boolean：必须是类型boolean。
   4. method：必须是类型function。
   5. regexp：必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。
   6. integer：必须是类型number和整数。
   7. float：必须是类型number和浮点数。
   8. array：必须是由…确定的数组Array.isArray。
   9. object：必须是类型object而不是Array.isArray。
   10. enum：价值必须存在于enum。
   11. date：值必须有效，由确定 Date
   12. url：必须是类型url。
   13. hex：必须是类型hex。
   14. email：必须是类型email。

正则表达式验证：

		rules: {
			data_A: [
				{
					required: true,
					message: '请输入',//为空时的判定
					trigger: 'blur'
				},{
                    pattern:/^\D\S{3,}/g,
                    //pattern中写入对应需求的正则表达式，举例为匹配一段以非数字开头长度不低于4位的字符串，返回结果不会截取字段，只要验证通过即可
                    message: '请输入正确内容',//不为空时的判定
					trigger: 'blur'
                }
			]
		}

嵌套验证/独立验证/二层验证：

​ 字段data_B如果是动态添加的数组形式，或为双层的数据形式，则需要对内部的数据进行验证，此时需要进行嵌套验证，也可以理解为独立验证，因为需要将prop和rules独立声明

<template>
	<div>
		<el-form :model="form" :rules="rules" ref="ruleForm">
			<el-form-item label="活动名称" prop="data_A">
                <el-input v-model.number="form.data_A"></el-input>
    		</el-form-item>
			<div v-for="(item, index) in form.data_B">
                <!-- 需要独立验证的字段data_B -->
				<el-form-item label="val" :prop="'data_B.' + index + '.val'" :rules="rules.val">
                    <!-- 此时需要对prop进行数据绑定,需要带上冒号‘:’，否则会出现报错类型2 ,
					  -- 在上层v-for循环中，prop的data_B不能与item互换，prop和form.data_B直接绑定,如果写为item，会出现报错类型1，prop的格式为:外层字段+index+当前表单字段，注意两个点的位置以及单双引号的用法。
					  -- :rules验证规则也需要单独声明，格式为:验证规则对象[当前验证规则key]-->
                    <el-input v-model.number="item.val"></el-input>
    			</el-form-item>
                
				<el-form-item label="value" :prop="'data_B.' + index + '.value'" :rules="rules.value">
                    <el-input v-model="item.value"></el-input>
    			</el-form-item>
			</div>
			<el-form-item>
				<el-button type="primary" @click="onSubmit('ruleForm')">验证</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				data_A: '',
				data_B: [{ val: 0, value: '' }, { val: 1, value: '' }]
			},
			rules: {
				data_A: [
                    { type: 'number',
                     required: true, 
                     message: '请输入',
                     trigger: 'blur' }
                ],
				val: [
                    { type: 'number',
                     required: true,
                     message: '请输入val',
                     trigger: 'blur' }
                ],
				value: [
                    { type: 'string', 
                     required: true, 
                     message: '请输入value', 
                     trigger: 'blur' }
                ]
			}
		};
	},
	methods: {
		onSubmit(formName) {
			this.$refs[formName].validate(valid => {
				console.log('valid:', valid);
				if (valid) {
					this.$message.success('ok');
				} else {
					this.$message.error('error');
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

常见报错类型：

类型1(片段).Property or method “data_A” is not defined on the instance but referenced during render

//属性或方法“data_A”未在实例上定义，但在呈现期间被引用。

类型2：please transfer a valid prop path to form item!

//请将有效的道具路径传送到表单项！