【Vue前端】Vue前端注册业务实现！！！【代码】

Z时代
2024-01-10
分类：综合

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文档

重要提示：以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;
            }
        },
    }
})