<template>
<div>
<el-form
:model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="100px"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<el-button @click="resetForm">重置</el-button>
<el-button type="primary" @click="addUser">确定</el-button>
</div>
</template>
<script>
export default {
data() {
//====自定义校验规则====
//验证邮箱的规则
var checkEmail = (rules, value, callback) => {
//验证邮箱的正则表达式
const regEmail = /^([a-zA-A0-9_-])+@([a-zA-A0-9_-])+(\.[a-zA-A0-9_-])+/;
if (regEmail.test(value) == true) {
//合法的邮箱
return callback();
} else {
callback(new Error("请输入合法的邮箱"));
}
};
//验证手机号的规则
var checkMobile = (rules, value, callback) => {
//验证手机号的正则表达式
const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if (regMobile.test(value) == true) {
//合法的手机号
return callback();
} else {
callback(new Error("请输入合法的手机号"));
}
};
return {
addForm: {
username: "",
password: "",
email: "",
mobile: ""
},
addFormRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{
min: 3,
max: 10,
message: "请输入用户名的长度在 3 到 10 个字符之间",
trigger: "blur"
}
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{
min: 6,
max: 15,
message: "密码的长度在 6 到 15 个字符之间",
trigger: "blur"
}
],
email: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
//自定义规则
{ validator: checkEmail, trigger: "blur" }
],
mobile: [
{ required: true, message: "请输入手机号", trigger: "blur" },
//自定义规则
{ validator: checkMobile, trigger: "blur" }
]
}
};
},
methods: {
resetForm() {
this.$refs.addFormRef.resetFields();
},
addUser() {
this.$refs.addFormRef.validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
}
}
};
</script>
<style scoped>
</style>
:rules="addFormRules"
表单绑定验证对象
prop=""
绑定验证属性