【Vue前端】Vue前端注册业务实现!!!【代码】
1. Vue绑定注册界面准备
1.导入Vue.js库和ajax请求的库
<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script> <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
2.准备register.js文件
<script type="text/javascript" src="{{ static('js/register.js') }}"></script>
2. Vue绑定注册界面实现
- 重要提示:以Vue绑定注册表单及用户名和密码为例
1.register.html
- 绑定内容:变量、事件、错误提示等
<form method="post" class="register_form" @submit="on_submit"> {{ csrf_input }} <ul> <li> <label>用户名:</label> <input type="text" name="user_name" > <span class="error_tip" v-show="error_username">[[error_username_message]]</span> </li> <li> <label>密码:</label> <input type="password" name="pwd" > <span class="error_tip" v-show="error_password">[[error_password_message]]</span> </li> <li> <label>确认密码:</label> <input type="password" name="cpwd" > <span class="error_tip" v-show="error_confirm">[[error_confirm_message]]</span> </li> <li> <label>手机号:</label> <input type="text" name="phone" > <span class="error_tip" v-show="error_mobile">[[error_mobile_message]]</span> </li> <li> <label>图形验证码:</label> <input type="text" name="pic_code" > <img src="/static/images/pic_code.jpg" alt="图形验证码" class="pic_code"> <span class="error_tip">请填写图形验证码</span> </li> <li> <label>短信验证码:</label> <input type="text" name="msg_code" > <a href="javascript:;" class="get_msg_code">获取短信验证码</a> <span class="error_tip">请填写短信验证码</span> </li> <li class="agreement"> <input type="checkbox" name="allow" > <label>同意”美多商城用户使用协议“</label> <span class="error_tip" v-show="error_allow">[[error_allow_message]]</span> </li> <li class="reg_sub"> <input type="submit" value="注 册"> </li> </ul> </form>
2.register.js
- 绑定内容:变量、事件、错误提示等
- .用户交互事件实现(register.js)
var vm = new Vue({ el:'#app', delimiters:["[[","]]"], data:{ //接收参数 username:'', password:'', password2:'', mobile:'', allow:'', //提示标记 error_username:false, error_password:false, error_confirm:false, error_mobile:false, error_allow:false, //错误信息展示 error_username_message:'', error_password_message:'', error_confirm_message:'', error_mobile_message:'', error_captcha_message:'', error_allow_message:'', }, methods:{ //检测用户名 check_username:function () { let re = /^[a-zA-Z0-9_]{5,20}$/; if(re.test(this.username)){ this.error_username=false; }else { this.error_username_message='请输入5-20个字符的用户'; this.error_username=true; } }, //检测密码 check_password:function () { let re = /^[a-zA-Z0-9]{8,20}$/; if(re.test(this.password)){ this.error_password=false; }else { this.error_password_message='请输入8-20个字符密码'; this.error_password=true; } }, //检测确认密码 check_confirm_password:function () { if(this.password2 != this.password){ this.error_confirm=true; this.error_confirm_message='两次输入的密码不一致' }else{ this.error_confirm=false; } }, //检测手机号 check_mobile:function () { let re = /^1[3-9]\d{9}$/; if(re.test(this.mobile)){ this.error_mobile=false; }else{ this.error_mobile=true; this.error_mobile_message='请输入正确的手机号码'; } }, //提交注册按钮 on_submit:function () { this.check_username(); this.check_password(); this.check_confirm_password(); this.check_mobile(); if(this.error_username==true||this.error_password==true||this.error_confirm==true||this.error_mobile==true){ window.event.returnValue=false; } }, } })