简介
在项目开发过程中,遇到注册页面,该如何快速开发呢,接下来我用element ui 来实现,老司机开车请坐好
安装element ui 请大家自行百度 ,网上的方法有很多,在这里只演示如何实现
HTML代码
<section>
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="昵称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email" style="margin-buttom:10px;!important">
<el-input v-model="ruleForm.email"></el-input>
<el-button size="mini" round @click="sendMsg">发送验证码</el-button>
<span class="status">{{statusMsg}}</span>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="ruleForm.code" maxlength="4"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input v-model="ruleForm.pwd" type="password"></el-input>
</el-form-item>
<el-form-item label="确认密码" type="password" prop="cpwd">
<el-input v-model="ruleForm.cpwd"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">同意以下协议并注册</el-button>
<div class="error">{{error}}</div>
</el-form-item>
<el-form-item>
<a
class="f1"
href="https://rules-center.meituan.com/rules-detail/4"
target="_blank"
>《美团点评用户服务协议》</a>
</el-form-item>
</el-form>
</section>
css样式代码
.page-register {
.header {
header {
margin: 0 auto;
padding: 10px 0;
width: 980px;
.site-logo {
display: inline-block;
width: 128px;
width: 54px;
height: 36px;
text-indent: -9999px;
background-position: -669px -748px;
background-image: url(//s0.meituan.net/bs/file/?f=fe-sso-fs:build/assets/sp-normal.2ee5c09.png);
}
.login {
float: right;
}
.bold {
font-style: normal;
}
}
}
>section {
margin: 0 auto 30px;
padding-top: 30px;
width: 980px;
min-height: 300px;
padding-right: 550px;
box-sizing: border-box;
.status {
font-size: 12px;
margin-left: 20px;
color: #e6a23c;
}
.error {
color: red;
}
}
}
JavaScript逻辑代码
data() {
return {
statusMsg: '',
error: '',
ruleForm: {
name: '',
pwd: '',
code: '',
cpwd: '',
email: '',
},
rules: {
name: [
{
require: true,//必填
type: 'string',//约束类型
message: '请输入昵称',//提示信息
trigger: 'blur',//触发方式,失去焦点触发
},
],
email: [
{
require: true,
type: 'email',
message: '请输入邮箱',
trigger: 'blur',
},
],
pwd: [
{
require: true,
message: '创建密码',
trigger: 'blur',
},
],
cpwd: [
{
require: true,
message: '确认密码',
trigger: 'blur',
},
{
validator(rule, value, callback) {//验证判断,逻辑判断
if (value === '') {
//如果值为空抛出错误
callback(new Error('请再次输入密码'))
} else if (value !== this.ruleForm.pwd) {
//如果密码不匹配也同样抛出错误
callback(new Error('两次输入的密码不一样'))
} else {
//没有问题,回调执行
callback()
}
},
trigger: 'blur',
},
],
code: [[]],
},
}
},
谢谢观看,如有不足,敬请指教