elementUI表单校验
1.表单上加rules {object}(常用)
增加普通校验规则
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="姓名:" :label-width="formLabelWidth" prop="uname">
<el-input v-model="form.uname" placeholder="请输入姓名" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别:" :label-width="formLabelWidth" prop="usex">
<el-radio v-model="form.usex" label="男">男</el-radio>
<el-radio v-model="form.usex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="班级:" v-if="!form.power" :label-width="formLabelWidth" prop="class">
<el-select v-model="form.uclass" placeholder="请选择班级">
<el-option label="一班" value="一班"></el-option>
<el-option label="二班" value="二班"></el-option>
<el-option label="三班" value="三班"></el-option>
</el-select>
</el-form-item>
<el-form-item label="密码:" :label-width="formLabelWidth" prop="upassword">
<el-input type="password" v-model="form.upassword" placeholder="请输入密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码:" :label-width="formLabelWidth" prop="upassword1">
<el-input type="password" v-model="form.upassword1" placeholder="再次输入密码" autocomplete="off"></el-input>
</el-form-item>
</el-form>
这种方式需要在data()中写入rule{},对于需要校验字段prop中的如uname写上验证规则,如下:
data() {
return {
// 表单规则
rules: {
uid: [{ required: true, message: '请输入学号', trigger: 'change' }],
uname: [
{ required: true, message: '请输入姓名', trigger: 'change' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
usex: [{ required: true, message: '请输入性别', trigger: 'change' }],
uclass: [
{ required: true, message: '请输入班级', trigger: 'change' },
// { validator: compareTime, trigger: "change" },
],
upassword: [{ required: true, message: '请输入密码', trigger: 'change' }],
upassword1: [{ required: true, message: '请再次输入密码', trigger: 'change' }],
},
}
}
增加详细校验规则
如:
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
// 比较结束时间是否满足条件
var compareTime = (rule, value, callback) => {
if (this.form.endTime > this.time && this.form.endTime > this.form.startTime) {
callback()
} else {
callback(new Error('结束时间应晚于当前或开始时间'))
}
},
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
2.在el-form-item单个添加
<el-form-item label="电话号码" class="el-form-item--small has-error" :prop="phoneNum" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }]">
<el-input v-model="v.phoneNum" :maxlength="11" placeholder clearable></el-input>
</el-form-item>
这种方式适用于需要个别检验的字段,或者表单字段有变动的校验;
标签:required,校验,element,trigger,ui,标红,message,true,change From: https://www.cnblogs.com/ommggg/p/17897044.html