elementui rules校验规则使用
时间: 2023-10-27 09:45:51 浏览: 63
在 ElementUI 中,可以使用 rules 属性对表单进行校验。可以在表单组件中设置 rules,也可以在每个表单控件中设置 rules。例如,在 el-form 组件中设置 rules:
<el-form :model="form" :rules="rules">
<!-- 表单控件 -->
</el-form>
在 data() 中设置 rules 对象,例如:
data() {
return {
form: {
name: '',
age: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须是数字', trigger: 'blur' },
{ min: 0, max: 150, message: '年龄在0到150之间', trigger: 'blur' }
]
}
}
}
以上代码中,name 和 age 分别绑定到了 form 对象中,并在 rules 中对每个字段进行了校验规则的设置。其中,每个校验规则都是一个对象,包含了校验规则的类型、提示信息和触发方式等属性。在实际使用中,也可以自定义校验规则。