<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/element-ui/2.4.5/index.js"></script>
</head>
<style>
#app {
background-color: rgb(239, 246, 250);
}
</style>
<body>
<div id="app">
<div class="register">
<section class="form_container">
<div class="manage_tip">
<span class="title"></span>
</div>
<el-form :model="registerUser" :rules="rules" class="registerForm" ref="registerForm"
label-width="80px">
<el-form-item label="用户名" prop="name">
<el-input v-model="registerUser.name" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="registerUser.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="registerUser.password" placeholder="请输入密码" type="password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="password2">
<el-input v-model="registerUser.password2" placeholder="请确认密码" type="password"></el-input>
</el-form-item>
<el-form-item label="选择身份">
<el-select v-model="registerUser.identity" placeholder="请选择身份">
<el-option label="管理员" value="manager"></el-option>
<el-option label="员工" value="employee"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" class="submit_btn" @click="submitForm('registerForm')">注 册</el-button>
</el-form-item>
</el-form>
</section>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
var validatePass2 = (rule, value, callback) => {
if (value !== this.registerUser.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
registerUser: {
name: "",
email: "",
password: "",
password2: "",
identity: ""
},
rules: {
// 要以数组形式展示
name: [
{ required: true, message: "用户名不能为空", trigger: "change" },
{ min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
],
email: [
{
type: "email",
required: true,
message: "邮箱格式不正确",
trigger: "blur"
}
],
password: [
{ required: true, message: "密码不能为空", trigger: "blur" },
{ min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
],
password2: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{
min: 6,
max: 30,
message: "长度在 6 到 30 个字符",
trigger: "blur"
},
{ validator: validatePass2, trigger: "blur" }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$message({
message: "注册成功！",
type: "success"
});
} else {
this.$message({
message: "注册失败！",
type: "error"
});
}
});
}
}
});
</script>
</html>