1. 注册
自定义页面 路径 /mdiyPage/register.do对应模版 register.htm
HTML
<div id="app" v-cloak>
<!--表单位置-start-->
<el-form ref="form" :model="form" :rules="rules" label-position="right" size="large" label-width="120px">
<el-row :gutter="0" justify="start" align="top">
<el-col :span="12">
<el-form-item label="用户名" prop="peopleName">
<el-input v-model="form.peopleName" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入用户名">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="peoplePhone">
<el-input v-model="form.peoplePhone" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入手机号">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="0" justify="start" align="top">
<el-col :span="12">
<el-form-item label="密码" prop="peoplePassword">
<el-input type="password" :show-password="true" :clearable="true" v-model="form.peoplePassword" :style="{width:'100%'}" :disabled="false" placeholder="请输入密码"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="rePeoplePassword" label="确认密码" class="input">
<el-input type="password" v-model="form.rePeoplePassword" :show-password="true" :clearable="true" placeholder="请再次输入新密码">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="0" justify="start" align="top">
<el-col :span="12">
<el-form-item label="验证码" prop="rand_code" class="input">
<el-row :gutter="0" justify="start" align="top">
<el-col :span="14">
<el-input v-model="form.rand_code" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入验证码">
</el-input>
</el-col>
<el-col :span="10">
<div style="display: flex; height: 38px;">
<img :src="verifCode" class="code-img" @click="code" style="cursor: pointer" alt="点击换一张" />
<div @click="code" style="margin-left: 10px">
</div>
</div>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<!--邮箱验证start-->
<el-form-item label="-邮箱验证码" prop="peopleCode" class="input">
<el-row :gutter="0" justify="start" align="top">
<el-col :span="13">
<el-input v-model="form.peopleCode" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入验证码">
</el-input>
</el-col>
<el-col :span="11">
<el-button v-text="sendPeopleCodeMsg" :disabled="sendPeopleCodeDisabled" type="info" plain @click="getPeopleCode" style="width: 100px; padding: 12px 0;margin-left: 10px ">
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-form-item label=" " class="input">
<el-button @click="register" type="primary" :loading="saveDisabled">
{{saveDisabled?'提交中':'立即注册'}}
</el-button>
<div>
<el-link href="/mdiyPage/login.do" :underline="false" icon="el-icon-user">账号登录</el-link>
</div>
</el-form-item>
</el-form>
<!--表单位置-end-->
</div>
JavaScript
<script>
var validatePass = function(rule, value, callback) {
if (value !== app.form.peoplePassword) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
//百度编辑器默认配置
var app = new Vue({
el: '#app',
watch: {},
data: {
//验证码计时
countdown: 0,
//发送邮箱验证码按钮
sendPeopleCodeDisabled: false,
sendPeopleCodeMsg: "发送验证码",
saveDisabled: false,
verifCode: "/code?t=" + new Date().getTime(),
organizationIdOptions: [{ 'id': '0', 'name': '自由创业者' }],
puIcon: null,
//表单数据
form: {
rePeoplePassword: "",
// 用户名
peopleName: '',
// 密码
peoplePassword: '',
// 手机号
peoplePhone: '',
// 邮箱
peopleMail: '',
// 真实姓名
puRealName: '',
// 生日
puBirthday: '',
// 身份证号
puCard: '',
// 所属机构
organizationId: '0',
// 用户头像
puIcon: '',
// 介绍
introduce: '',
},
rules: {
rePeoplePassword: [{
required: true,
message: '确认密码不能为空',
trigger: 'blur'
},
{
min: 6,
max: 20,
message: '长度在 6 到 20 个字符',
trigger: 'blur'
},
{
validator: validatePass,
trigger: 'blur'
}
],
// 用户名
peopleName: [{ "required": true, "message": "用户名不能为空" }, {
"min": 0,
"max": 20,
"message": "用户名长度必须为0-20"
}],
// 密码
peoplePassword: [{ "required": true, "message": "密码不能为空" }, {
"min": 6,
"max": 30,
"message": "用户名长度必须为6-30"
}],
// 手机号
peoplePhone: [{ "required": true, "message": "手机号不能为空" }, {
"pattern": /^1[34578]\d{9}$/,
"message": "手机号格式不匹配"
}, { "min": 11, "max": 11, "message": "手机号长度必须为11位" }],
// 所属机构
organizationId: [{ "required": true, "message": "请选择所属机构" }],
//邮箱验证start
rand_code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ min: 1, max: 4, message: '长度不能超过4个字符', trigger: 'change' }
],
peopleCode: [
{ required: true, message: '请输入短信验证码', trigger: 'blur' },
{ min: 1, max: 6, message: '长度不能超过6个字符', trigger: 'change' }
],
//邮箱验证end
},
},
methods: {
//邮箱验证start
//倒计时
countdownSubtract: function() {
this.countdown--;
this.sendPeopleCodeMsg = "重新发送(" + this.countdown + ")";
if (this.countdown == 0) {
this.sendPeopleCodeMsg = "发送验证码";
this.sendPeopleCodeDisabled = false;
this.countdown = 0;
return;
}
setTimeout(this.countdownSubtract, 1000);
},
//获取图形验证码
code: function() {
this.verifCode = "/code?t=" + new Date().getTime();
},
//获取邮箱验证码
getPeopleCode: function() {
var that = this;
// 发送邮箱验证码
if (that.countdown > 0) {
return;
}
var flag = true;
this.$refs['form'].validateField(['rand_code', 'peoplePhone'], (Error) => {
if (Error) {
//执行
flag = false;
}
});
if (flag) {
//号码是否存在
ms.http.post("/isExists.do", {
peoplePhone: that.form.peoplePhone,
}).then(function(data) {
if (data.result) {
that.$notify({
title: '失败',
message: '该手机号码已绑定',
type: 'warning'
});
} else {
//请求手机验证码
ms.http.post('/sendCode.do', {
receive: that.form.peoplePhone,
modelCode: "bindPhone",
type: "sms",
isSession: true,
rand_code: that.form.rand_code,
}).then(function(data) {
if (data.result) {
that.$notify({
title: '成功',
message: '验证码已发出，请注意查收！',
type: 'success'
});
that.countdown = 60;
that.countdownSubtract();
that.sendPeopleCodeDisabled = true;
} else {
if (data.msg) {
that.$notify({
title: '失败',
message: data.msg,
type: 'warning'
});
}
that.code();
}
})
}
});
}
},
//邮箱验证end
//注册
register: function() {
var that = this;
that.$refs.form.validate((valid) => {
if (valid) {
that.saveDisabled = true;
//邮箱验证start
ms.http.post("/checkSendCode.do", {
receive: that.form.peoplePhone,
code: that.form.peopleCode
}).then(function(res) {
if (!res.result) {
that.saveDisabled = false;
that.$notify({
title: '失败',
message: res.msg,
type: 'warning'
});
} else {
//邮箱验证end
var data = JSON.parse(JSON.stringify(that.form));
data.puIcon = that.puIcon;
data.puRealName = that.form.peopleName;
ms.http.post("/register.do", data).then(function(res) {
if (res.result != true) {
that.saveDisabled = false;
that.$notify({
title: '失败',
message: res.msg,
type: 'warning'
});
} else {
that.$notify({
title: '成功',
message: '注册成功！请等待管理员审核',
type: 'success',
duration: '1000',
onClose: function() {
location.href = '/';
}
});
}
})
}
})
}
});
},
},
created: function() {
//验证码start
this.code();
}
})
</script>
[!tip] 此代码片段中包含了
发送插件业务，需要安装发送插件才能正常使用