Element Form表单验证

<el-form :model="addForm" :rules="addRules" ref="addForm" label-width="110px">

<el-form-item label="活动名称" prop="name" style=" 425px;">
<el-input v-model="addForm.name" size="medium" placeholder="请填写活动名称"></el-input>
</el-form-item>

<el-form-item label="联系电话" prop="tel" style=" 425px;">
<el-input v-model="addForm.tel" size="medium" placeholder="请填写联系电话"></el-input>
</el-form-item>

<el-form-item label="需要人数" prop="personNumber" style=" 425px;">
<el-input v-model="addForm.personNumber" size="medium" placeholder="请填写活动需要人数"></el-input>
</el-form-item>
<el-form-item label="最大报名人数" prop="maxPersonNumber" style=" 425px;">
<el-input v-model="addForm.maxPersonNumber" size="medium" placeholder="请填写活动最大报名人数"></el-input>
</el-form-item>

</el-form>

export default {

data() {

var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
const reg = /^1[3|4|5|7|8][0-9]d{8}$/
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的手机号'));
}
}
};

var checkpersonNumber = (rule, value, callback) => {
if (Number.isInteger(Number(value)) && Number(value) > 0) {
if (this.addForm.maxPersonNumber != "") {
if (value > Number(this.addForm.maxPersonNumber)) {
callback(new Error("需要人数不能大于最大报名人数"));
} else {
callback();
}
} else {
callback();
}
} else {
callback(new Error("请输入有效数字"));
}
};
var checkMaxpersonNumber = (rule, value, callback) => {
if (Number.isInteger(Number(value)) && Number(value) > 0) {
if (this.addForm.personNumber != "") {
if (value < Number(this.addForm.personNumber)) {
callback(new Error("最大报名人数不能小于需要人数"));
} else {
callback();
}
} else {
callback();
}
} else {
callback(new Error("请输入大于0的有效数字"));
}
};

return {

addRules: {
name: [{
required: true,
message: "请输入活动名称",
trigger: "blur"
}],

tel: [{
required: true,
validator: checkPhone,
trigger: 'blur'
}],

personNumber: [{
required: true,
validator: checkpersonNumber,
trigger: "blur"
}],
maxPersonNumber: [{
required: true,
validator: checkMaxpersonNumber,
trigger: "blur"
}],
},

}

}

},

methods: {

submitForm() {
this.$refs.addForm.validate((valid) => {
if (valid) {
//验证成功执行
that.$router.push({
path: "/partybuilding/activity"
});
} else {
that.$message.error(response.data.msg);
}
}).catch(function(err) {
console.log(err);
});
} else {
//定位错误位置
setTimeout(() => {
var isError = document.getElementsByClassName("is-error");
isError[0].querySelector('input').focus();
}, 100);
return false;
}
});
},

}

原文地址:https://www.cnblogs.com/yyjspace/p/11652614.html