vue+element实现手机号验证码注册的示例

很全的PC端手机端适配！一个项目多个域名我试了代理跨域本地运行可以打包上传不行，然后就用全地址，后端哪里要设置域名白名单！直接上图和完整代码！觉得可以就点个赞吧，谢谢！

./assets/img/register/bg@2x.png';export default { data() { let code = (rule, value, callback) => { if (value === "") { return callback(new Error("请输入验证码")); } else if (value.length != 4) { return callback(new Error("输入正确4位验证码")); } else { return callback(); } }; let telCheck = (rule, value, callback) => { var reg = /^1[3-9]d{9}$/; if (value === "") { return callback(new Error("请输入手机号码")); } else if (!Number.isInteger(value)) { return callback(new Error("手机号码必须是数字")); } else if (value.toString().length !== 11) { return callback(new Error("手机号码必须是11位数字")); } else if (!reg.test(value)) { return callback(new Error("请输入有效的手机号码")); } else { callback(); } }; return { imageList:[Bg], token: String, ReginForm: { tel: "", verification: "", }, logining: false, sendAuthCode: true, //显示‘获取按钮'还是'倒计时' auth_time: 0 /*倒计时 计数器*/, verification: "", //绑定输入验证码框 rule: { tel: [ { required: true, validator: telCheck, //手机号正则限制 trigger: "blur", }, ], verification: [ { required: true, validator: code, //验证码限制 trigger: "blur", min: 6, max: 6, }, ], }, }; }, created() { const accountParam = { account: "gongchangku", password: "gongchangku", }; this.$http .post( "https://newcp.51dsx.cn/index.php/api/user/getSysToken", jsON.stringify(accountParam) ) .then((data) => { this.token = data.data.data.token; }); }, methods: { // 点击获取验证码 async getAuthCode() { if (this.ReginForm.tel === "") { this.$message.error("请输入手机号"); return; } const params = { umobile: this.ReginForm.tel, token: this.token, }; //获取短信验证码接口 this.$http .post( "https://newcp.51dsx.cn/index.php/api/Sms/sendVerificationCode", JSON.stringify(params), { headers: { token: this.token, }, } ) .then((data) => { if (data.data.msg === "已被注册") { this.sendAuthCode = true; this.$message.error("已被注册"); } return false; }); if (this.ReginForm.tel === "") { this.sendAuthCode = true; } else { this.sendAuthCode = false; } /jtxknCQ/设置倒计时秒 this.auth_time = 60; var auth_timetimer = setInterval(() => { this.auth_time--; if (this.auth_time <= 0) { this.sendAuthCode = true; clearInterval(auth_timetimer); } }, 1000); }, // 封装注册发送请求方法 thisAjax() { // 手机注册 let params = { umobile: this.ReginForm.tel, ucode: this.ReginForm.verification, }; this.$http .post( "https://newcp.51dsx.cn/index.php/api/User/userWebRegister", JSON.stringify(params), { headers: { token: this.token, }, } ) .then((data) => { if (data.data.msg === "验证码不正确") { this.logining = false; this.$message.error("验证码不正确"); } else { this.$message.success("注册成功,即将跳转到首页"); window.setTimeout(this.$router.push("/"),2) } return false; }); }, //点击注册 submit() { this.$refs.ReginForm[0].validate((valid) => { if (valid) { this.logining = true; //转圈 this.thisAjax(); } else { this.$message.error("填写不完整或格式错误"); } }); }, },};</script> <style lang="scss" scoped>.icon2 { width: 0.75rem !important; height: 0.8rem !important; padding: 0 !important; margin: 0 4px 17px -4px; color: rgb(182, 179, 179) !important;}.verification { width: 25px !important; margin-right: 5px;}.input_phone { margin: 0 8px 0 2px;}@media (max-width: 414px) { .icon2 { width: 15% !important; padding: 0 !important; margin: 0 4px 17px 0px; color: rgb(182, 179, 179) !important; } .auth_text { font-size: 12px !important; } .button_obtain { margin: -22px 0 0 6px !important; } .el-main { padding: 0 !important; } .permit { height: 80px !important; } .register_button { height: 37px !important; } .button_obtain { width: 20%; } .input_phone { width: 5%; margin-left: 4px; margin-right: 8px; } .verification { width: 16px !important; margin: 0 6px 0 2px; } .icon1 { display: none !important; } .register_box_right { border-radius: 0 !important; width: 100% !important; height: 100% !important; } .content { border-radius: 25px; box-shadow: 0 0 10px #c1cadd; background: #fff; padding: 0.5rem 0.3rem 0.3rem 0.3rem; margin: 1.555556rem auto !important; } .input1 { font-size: 0.296296rem !important; } .button_obtain { width: 58% !important; font-size: 0.222222rem !important; } .input1 { width: 55.5% !important; } .register_box_right { background: none !important; } .register_box .register_box_right .content .input button { top: -7px !important; }}@media (max-width: 900px) { .content { width: 7.5rem !important; }}@media (min-width: 1400px) { .register_box .icon1 img { width: 2rem !important; } .register_box .icon1 { width: 5rem !important; } .register_box .icon1 span { font-size: 0.444444rem !important; }}.el-main { padding: 0 !important;}.register_box { position: relative; width: 100%; height: 100vh; .icon1 { display: inline-block; width: 4rem; margin: 0.444444rem; padding: 0.444444rem 0; img { width: 1rem; } span { margin-left: 0.222222rem; font-size: 24px; font-weight: 400; color: #ffffff; line-height: 16px; } .left_bottom { position: absolute; bottom: 0.8rem; } } .register_box_right { position: absolute; top: 0; right: 0; width: 60%; height: 100%; background: #ffffff; border-radius: 0.555556rem 0px 0px 0.555556rem; opacity: 1; .content { width: 8.592593rem; height: 70%; margin: 30vh auto; .inputs { width: 100%; display: flex; align-items: center; justify-content: space-between; img { margin-bottom: 21px; } } .auth_text { margin: -22px 0 0 10px; } .el-form-item { width: 100% !important; } .content_text { font-size: 0.518519rem; font-weight: 600; color: #525252; line-height: 0.611111rem; margin-bottom: 0.8rem; } .button_obtain { margin: -22px 0 0 5px; } butwww.easck.comton { height: 37px; width: 25%; border: none; color: #ffffff; background: linear-gradient(223deg, #8f99ed 0%, #b8ceef 100%); border-radius: 0.074074rem 0.074074rem 0.074074rem 0.074074rem; opacity: 1; } .register_button { width: 100%; height: 0.740741rem; border-radius: 0.111111rem 0.111111rem 0.111111rem 0.111111rem; opacity: 1; button { background: linear-gradient(223deg, #8f99ed 0%, #b8ceef 100%); width: 100%; height: 100%; border: none; font-size: 0.296296rem; font-weight: 500; color: #ffffff; line-height: 0.351852rem; } } } .permit { width: 100%; height: 0.740741rem; text-align: center; margin-top: 0.3rem; span { font-size: 0.26rem; font-weight: 500; color: #a1a1a1; line-height: 0.351852rem; } a { font-size: 13.5px; font-weight: 400; color: #007aff; line-height: 0.296296rem; } } }}</style>