实现效果如下:
<template>
<div class="body">
<!-- 注册表单 -->
<el-form ref="form" :model="form" class="form" :rules="rules">
<!-- 账号 -->
<el-form-item label="账号" label-width="80px" prop="account">
<el-input v-model="form.account" placeholder="请输入手机号"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item label="密码" label-width="80px" prop="password">
<el-input
v-model="form.password"
placeholder="密码需同时包含数字与字母,至少8位"
></el-input>
</el-form-item>
<!-- 确认密码 -->
<el-form-item label="确认" label-width="80px" prop="confirm">
<el-input v-model="form.confirm" placeholder="请确认密码"></el-input>
</el-form-item>
<!-- 登录按钮 -->
<el-form-item>
<el-button type="primary" @click="register" class="button"
>注册
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
account: "",
password: "",
confirm: "",
},
rules: {
account: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ validator: this.validateAccount, trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ validator: this.validatePassword, trigger: "blur" },
],
confirm: [
{ required: true, message: "请确认密码", trigger: "blur" },
{ validator: this.validateConfirm, trigger: "blur" },
],
},
};
},
methods: {
// 注册
register() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log("注册!");
}
});
},
// 手机号校验
validateAccount(rule, value, callback) {
const reg = /^[1][3-9][0-9]{9}$/;
if (value === "" || value === undefined || value == null) {
callback();
} else {
if (!reg.test(value) && value !== "") {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
}
},
// 密码校验
validatePassword(rule, value, callback) {
if (!/^(?=.*[A-Za-z])(?=.*\d).{8,}$/.test(value)) {
callback(new Error("密码需同时包含数字与字母,至少8位"));
} else {
callback();
}
},
// 确认密码校验
validateConfirm(rule, value, callback) {
if (value !== this.form.password) {
callback(new Error("两次输入密码不一致"));
} else {
callback();
}
},
},
};
</script>
<style scoped>
.body {
position: fixed;
width: 100%;
height: 100%;
}
.form {
width: 30%;
margin: 7% auto;
padding-right: 45px;
padding-top: 2%;
padding-bottom: 2%;
border-radius: 5px;
box-shadow: 0 0 5px 1px #999;
}
.button {
width: 91.5%;
margin-left: 45px;
margin-top: 2%;
}
</style>
在这个例子中,通过在 data 中添加 rules 属性来定义表单验证规则,然后在模板中使用 :rules 属性将这些规则应用到相应的表单项上。validateAccount、validatePassword 和 validateConfirm 是自定义的验证方法,用于验证密码和确认密码的规则。最后,在注册按钮点击时,通过 this.$refs.form.validate() 来触发表单验证。