我们在使用element-ui中的form表单做一些简单校验时
先看官方文档
api自带的rules就是验证的规则
有两种方法
一种是写在js代码中
- trigger代表在什么时候触发验证
- message代表出发验证时提示内容
- type代表验证的格式 例如 “string” “number” “eamil”…之类
- min: 3, max: 5 代表最小长度 和 最大长度
- required代表是否开始判空验证
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
然后在 el-form 中绑定rules 属性 写上刚才创建的验证数组
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"></el-from>
注意在每个对应的el-form-item 绑定上prop
名字要对应上数组里的每一个键名称
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
另一种方法就是写在行内式
代表意义都一样 就是换了个地方写
如果验证多的话写在行内会看起来比较头疼,建议写在js中
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>