基本表单验证:
基本的表单验证需要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验证规则的参数:
- 是否必须: required:true|| fasle
- 根据正则表达式验证: pattern:
- 最大长度和最小长度: min和max
- 数据转换:transform(value){return}
- 自定义校验功能:validador:fn(rule, value, callback);
- 触发规则:trigger:blur|change
- 自带验证类型: type:
- string:必须是类型string
- number:必须是类型number。
- boolean:必须是类型boolean。
- method:必须是类型function。
- regexp:必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。
- integer:必须是类型number和整数。
- float:必须是类型number和浮点数。
- array:必须是由…确定的数组Array.isArray。
- object:必须是类型object而不是Array.isArray。
- enum:价值必须存在于enum。
- date:值必须有效,由确定 Date
- url:必须是类型url。
- hex:必须是类型hex。
- 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!
//请将有效的道具路径传送到表单项!