目录
1.效果图
2.template部分
<template>
<div>
<el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
<h3 class="login_title"> 注 册 </h3>
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="password2">
<el-input show-password v-model="form.password2" placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="register" class="login_button" type="primary"> 注 册 </el-button>
</el-form-item>
</el-form>
</div>
</template>
3.style部分
<style lang="less" scoped>
.login-container {
width: 400px;
border:1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
/deep/.el-form-item {
.el-form-item__label{
padding: -1px 12px 0 0;
}
}
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
.login_register {
width: 70px;
height: 40px;
text-align: center;
margin-top: 10px;
}
}
</style>注意，这里是用less写的
所以你需要先下载less和less-loader
在终端输入
npm i less
还有
npm i less-loader要注意这两个插件的版本，太旧远或者太新都可能无法编译
4.js部分
let validate = (rule, value, callback) => {
//如果没有输入
if (value === '') {
callback(new Error('请输入密码'));
} else {
//如果输入的与确认密码框的值不同
if (this.form.password2 !== '') {
//则对确认密码框的表单进行校验
this.$refs.form.validateField('password2');
}
callback();
}
};
let validate2 = (rule, value, callback) => {
//第二次输入密码
if (value === ' ') {
callback(new Error('请再次输入密码'));
// 如果第二次输入的密码不等于第一次输入的密码
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致！'));
} else {
callback();
}
};| validateField | 对部分表单字段进行校验的方法 |
| rules | 表单验证规则 | 类型：object |
form: {
userName: '',
password: '',
password2: '',
},
rules: {
userName: [
{ required: true, trigger: 'blur',message: '请输入用户名'},
{ message: '长度在6到16个字符', min: 6, max: 16,}
],
password: [
{ required: true,message:'请输入密码', trigger: 'blur',},
{ message: '长度在6到16个字符', min: 6, max: 16, trigger: 'blur'},
{ validator: validate, trigger: 'blur'}
],
password2: [
{ required: true, message:'请输入密码', trigger: 'blur',},
{ message: '长度在6到16个字符', min: 6, max: 16, trigger: 'blur'},
{validator: validate2, trigger: "blur"}
]
}5.完整代码
<template>
<div>
<el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
<h3 class="login_title"> 注 册 </h3>
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="password2">
<el-input show-password v-model="form.password2" placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="register" class="login_button" type="primary"> 注 册 </el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {GetRegister} from "@/Api/api";
export default {
name: "AppRegister",
data() {
let validate = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.form.password2 !== '') {
this.$refs.form.validateField('password2');
}
callback();
}
};
let validate2 = (rule, value, callback) => {
if (value === ' ') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致！'));
} else {
callback();
}
};
return {
form: {
userName: '',
password: '',
password2: '',
},
rules: {
userName: [
{ required: true, trigger: 'blur',message: '请输入用户名'},
{ message: '长度在6到16个字符', min: 6, max: 16,}
],
password: [
{ required: true,message:'请输入密码', trigger: 'blur',},
{ message: '长度在6到16个字符', min: 6, max: 16, trigger: 'blur'},
{ validator: validate, trigger: 'blur'}
],
password2: [
{ required: true, message:'请输入密码', trigger: 'blur',},
{ message: '长度在6到16个字符', min: 6, max: 16, trigger: 'blur'},
{validator: validate2, trigger: "blur"}
]
}
}
},
}
</script>
<style lang="less" scoped>
.login-container {
width: 400px;
border:1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
/deep/.el-form-item {
.el-form-item__label{
padding: -1px 12px 0 0;
}
}
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
.login_register {
width: 70px;
height: 40px;
text-align: center;
margin-top: 10px;
}
}
</style>