element-ui 表单校验的 prop 属性
我们通常认为,prop 属性是我们需要进行表单校验的时候使用的。但是当我们进行一些比较复杂的校验的时候,对 prop 的理解太浅就会使我们感到头疼:prop 属性究竟做了些什么?官网的解释有些拗口,用人话来说就是:prop 属性让你的校验规则和数据匹配。<el-form :model="ruleForm" :rules="rules"><el-form-item label="活
·
我们通常认为,prop 属性是我们需要进行表单校验的时候使用的。但是当我们进行一些比较复杂的校验的时候,对 prop 的理解太浅就会使我们感到头疼:prop 属性究竟做了些什么?
官网的解释有些拗口,用人话来说就是:prop 属性让你的校验规则和数据匹配。
<el-form :model="ruleForm" :rules="rules">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
};
}
}
</script>
以上的一个简单的例子可以告诉我们:prop
属性绑定了字段名 name
,在表单验证时,就会找到其内部的表单组件绑定的变量 ruleForm.name
的值是否符合 rules
中与 name
对应的验证规则
所以,在进行简单的校验时,把 prop 的属性值设置为需要校验的字段名即可。
更多推荐
已为社区贡献3条内容
所有评论(0)