这次给大家带来vue做出手机发送短信验证码注册功能,的注意事项有哪些,下面就是实战案例,一起来看一下。
效果如下:
代码如下:
template代码:
<el-main> <el-form :model="ReginForm" ref="ReginForm" :rules="rule" class="regform" label-width="0"> <h3 class="login-text">手机注册</h3> <el-form-item prop="tel"> <el-input type="text" v-model.number="ReginForm.tel" placeholder="手机号码"> </el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="ReginForm.password" placeholder="密码"> </el-input> </el-form-item> <p> <input class="auth_input" type="text" v-model="verification" placeholder="输入验证码" /> <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">获取验证码</span> <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之后重新发送验证码</span> </p> <el-form-item > <el-button type="success" class="submitBtn" round @click.native.prevent="submit" :loading="logining"> 注册 </el-button> <hr> <p>已经有账号,马上去<span class="to" @click="tologin">登录</span></p> </el-form-item> </el-form> </el-main> </template>
script 代码如下
export default { data () { let confirmpasswordCheck = (rule, value, callback) => { if (value === '') { return callback(new Error('密码是必须的')) } else { return callback() } } let telCheck = (rule, value, callback) => { 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 { callback() } } return { ReginForm: { password: '', tel: '', }, logining: false, sendAuthCode:true,/*布尔值,通过v-show控制显示‘获取按钮'还是‘倒计时' */ auth_time: 0, /*倒计时 计数器*/ verification:"",//绑定输入验证码框框 rule: { password: [ { required: true, message: '密码是必须的!', trigger: 'blur' } ], tel: [ { required: true, validator: telCheck, trigger: 'blur' } ], } } }, methods: { // 验证 getAuthCode:function () { const verification =this.ReginForm.tel; const url = " " console.log("url",url); this.$http.get(url).then(function (response) { console.log("请求成功",response) }, function (error) { console.log("请求失败",error); }) this.sendAuthCode = false; //设置倒计时秒 this.auth_time = 10; var auth_timetimer = setInterval(()=>{ this.auth_time--; if(this.auth_time<=0){ this.sendAuthCode = true; clearInterval(auth_timetimer); } }, 1000); }, // 封装注册发送请求方法 thisAjax(){ const passwordData=this.ReginForm.password; const phoneData =this.ReginForm.tel; const mCodeData=this.verification; // 手机注册 //emulateJSON:true设置后post可跨域 const url = " 填接口" this.$http.post(url,{填传入的参数},{emulateJSON:true}).then(function (response) { //登录后跳转的页面 this.$router.push('/'); }, function (error) { alert("请求失败",error); }) }, // ... submit () { this.$refs.ReginForm.validate(valid => { if (valid) { this.logining = true this. thisAjax(); console.log('开始写入后台数据!') } else { console.log('submit err') } }) }, reset () { this.$refs.ReginForm.resetFields() }, tologin () { //已经注册过跳转到登入界面 this.$router.push('/phoneLogin') } } } </script>
style代码如下:
.regform { margin: 20px auto; width: 310px; background: #fff; box-shadow: 0 0 10px #B4BCCC; padding: 30px 30px 0 30px; border-radius: 25px; } .submitBtn { width: 65%; } .to { color: #FA5555; cursor: pointer; } .auth_input{ width:140px; height:38px; margin-bottom:20px; border:1px solid #DCDFE6; /* color:red; */ padding-left:10px; border-radius: 8%; } .regform[data-v-92def6b0]{ width:370px; min-height: 440px; } .login-text{ text-align: center; margin-bottom:20px; } </style>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上就是vue做出手机发送短信验证码注册功能的详细内容,更多请关注php中文网其它相关文章!
已抢186555个
抢已抢67292个
抢已抢352981个
抢已抢667165个
抢已抢122337个
抢已抢23457个
抢