jucai/public/themes/default/views/mobile/app/auth/register_person_email.blade.php

@extends('mobile.module.layouts.content')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('mobile/css/members.css') }}" rel="stylesheet">
@endpush

@push('js')
    <script type="text/javascript" src="{{ theme_asset('gt/gt.js') }}"></script>
    <script type="text/javascript" src="{{ theme_asset('gt/gt.handle.js') }}"></script>
@endpush

@section('content')
    <div class="qs-top-nav x2 list_height">
        <div class="n-cell" onclick="javascript:location.href='{{route($sub_site.'mobile.register.person')}}'">手机注册<div class="b-line"></div></div>
        <div class="n-cell active">邮箱注册<div class="b-line"></div></div>
        <div class="clear"></div>
    </div>
    <div class="split-block"></div>
    <form id="regEmailForm" method="post" action="{{route($sub_site.'mobile.register.person')}}">
        {{csrf_field()}}
        <div class="loging-input-group">
            {{--<div class="group-list">
                <input id="username" name="username" type="text" class="l-input font14" placeholder="请输入用户名(必须是字母和数字)" autocomplete="off" value="">
            </div>

            <div class="group-list verfy">
                <input id="id_card" name="id_card" type="text" class="l-input font14" placeholder="请输入身份证号码" autocomplete="off">
            </div>--}}

            <div class="group-list email">
                <input id="email" name="email" type="text" class="l-input font14" placeholder="请输入常用邮箱" autocomplete="off" value = "">
            </div>
            <div class="group-list pwd">
                <input id="password" name="password" type="password" class="l-input font14" placeholder="请输入账户密码" autocomplete="off">
            </div>
            <div class="group-list pwd">
                <input id="password_confirmation" name="password_confirmation" type="password" class="l-input font14" placeholder="请确认账户密码" autocomplete="off">
            </div>
        </div>
        <div class="l-tool-bar list_height">
            <div class="read-agreement">
                <div class="for-checkbox active" id="for-checkbox">我已阅读并同意
                </div>
            </div>
            <div class="agreement link_gray6"><a href="#userAgreenment" id="reg_agreement">《用户服务协议》</a></div>
            <div class="clear"></div>
        </div>
        <div class="split-block"></div>
        <div class="btn-spacing btn-spacing-nmb"><a id="btnRegPersonal" href="javascript:;" class="qs-btn qs-btn-blue font18">注册个人会员</a></div>
        <input type="hidden" name="reg_type" value="2" />
        <input type="hidden" name="utype" value="2" />
        <input type="hidden" name="reg_source" value="2" />
        <input type="hidden" name="agreement" value="1" />
    </form>
    <div class="r-link-box qs-center link_blue"><a href="{{route($sub_site.'mobile.login')}}">已有账号，立即登录</a></div>
    <input type="hidden" id="J_config_varify_reg" value="1"/>
    <!--用户服务协议-->
    <script type="text/html" id="agreementTxt">
        <div class="headernavfixed">
            <div class="headernav font18"><div class="title">用户服务协议<div class="return js-back"></div><div class="rbtn"></div></div></div>
        </div>
        <div class="agreement-content">{!! str_replace(["\r\n","\n"], ["",""], config('aix.system.register_agreement.register_agreement.reg_agreement')) !!}</div>
    </script>
@endsection


@section('script')
    <script type="text/javascript" src="{{ theme_asset('app/js/regular.js') }}"></script>
    <script type="text/javascript" src="{{ theme_asset('mobile/js/popWin.js') }}"></script>
    <script>
        // 用户服务协议
        $('#for-checkbox').on('click', function() {
            $(this).toggleClass('active');
            if ($(this).hasClass('active')) {
                $('input[name=agreement]').val(1);
            } else {
                $('input[name=agreement]').val(0);
            }
        })
        var agreementTemp = $('#agreementTxt').html();
        $("#reg_agreement").on("click",function(){
            popWin.init({
                from:"right",
                html:agreementTemp,
                handle:function (a) {
                }
            })
        });
        var config_varify_reg = eval($('#J_config_varify_reg').val());
        // 配置极验
        if (config_varify_reg) {
            //邮箱注册
            var handlerRegEmail = function(captchaObj) {
                captchaObj.bindForm("#regEmailForm");
                captchaObj.onSuccess(function() {
                    regPerByEmailHandler();
                });
                captchaObj.onError(function() {

                });
                $('#btnRegPersonal').on('click', function () {
                    // var usernameValue = $.trim($('input[name=username]').val());
                    // var id_cardValue = $.trim($('input[name=id_card]').val());
                    var emailValue = $.trim($('input[name=email]').val());
                    var emailpasswordValue = $.trim($('input[name=password]').val());
                    var emailpasswordVerifyValue = $.trim($('input[name=password_confirmation]').val());
                    var agreementValue = $('input[name=agreement]').val();
                    /*if (usernameValue == '') {
                        qsToast({type:2,context: '请输入用户名'});
                        return false;
                    }
                    if (!inputRegValiUsername(usernameValue)) {
                        qsToast({type:2,context: '用户名必须是字母开头,包含6位以上数字和字母'});
                        return false;
                    }
                    if(!remoteValid('username',usernameValue)){
                        qsToast({type:2,context: '该用户名已被注册'});
                        return false;
                    }
                    if (id_cardValue == '') {
                        qsToast({type:2,context: '请输入身份证号码'});
                        return false;
                    }
                    if(!IsCardVali('id_card',id_cardValue)) {
                        qsToast({type:2,context: '身份证格式错误'});
                        return false;
                    }
                    if(!IsCard('id_card',id_cardValue)) {
                        qsToast({type:2,context: '该身份证已被注册'});
                        return false;
                    }*/
                    if (emailValue == '') {
                        qsToast({type:2,context: '请输入常用邮箱'});
                        return false;
                    }
                    if(!inputRegValiEmail(emailValue)){
                        qsToast({type:2,context: '邮箱格式错误'});
                        return false;
                    }
                    if(!remoteValid('email',emailValue)){
                        qsToast({type:2,context: '该邮箱已被注册'});
                        return false;
                    }
                    if (emailpasswordValue == '') {
                        qsToast({type:2,context: '请输入密码'});
                        return false;
                    }
                    if(!inputRegValiPassword(emailpasswordValue)){
                        qsToast({type:2,context: '密码长度要求为6-16个字符'});
                        return false;
                    }
                    if (emailpasswordVerifyValue == '') {
                        qsToast({type:2,context: '请确认账户密码'});
                        return false;
                    }
                    if(!inputRegValiPassword(emailpasswordVerifyValue)){
                        qsToast({type:2,context: '密码长度要求为6-16个字符'});
                        return false;
                    }
                    if(!inputRegValiPasswordRepeat(emailpasswordValue,emailpasswordVerifyValue)){
                        qsToast({type:2,context: '两次输入的密码不一致'});
                        return false;
                    }
                    if (agreementValue !=1) {
                        qsToast({type:2,context: '请接受用户服务协议'});
                        return false;
                    }
                    captchaObj.verify();

                });
            };

            gt_init(handlerRegEmail);
        }

        $('input[name=username]').change(function () {
            var usernameValue = $(this).val();
            if(!remoteValid('username',usernameValue)){
                qsToast({type:2,context: '该用户名已被注册'});
                return false;
            }
        })
        $('input[name=id_card]').change(function () {
            var currentValue = $(this).val();
            if(!IsCardVali('id_card',currentValue)) {
                qsToast({type:2,context: '身份证格式错误'});
                return false;
            }
            if(!IsCard('id_card',currentValue)) {
                qsToast({type:2,context: '该身份证已被注册'});
                return false;
            }
        });
        $('input[name=email]').change(function () {
            var emailValue = $(this).val();
            if(!remoteValid('email',emailValue)){
                qsToast({type:2,context: '该邮箱已被注册'});
                return false;
            }
        })

        // 个人邮箱注册处理程序
        function regPerByEmailHandler() {
            $('#btnRegPersonal').text('注册中...').addClass('btn_disabled').prop('disabled', !0);
            $.ajax({
                url: "{{route($sub_site.'mobile.register.person')}}",
                type: 'POST',
                dataType: 'json',
                data: $('#regEmailForm').serialize(),
                success: function (data) {
                    qsToast({type:2,context: "注册成功,正在为你跳转.."});
                    setTimeout(function () {
                        window.location.href = data.data.url;
                    },1000)

                },
                error:function(errorData) {
                    $('#btnRegPersonal').text('注册个人会员').removeClass('btn_disabled').prop('disabled', 0);
                    var response=$.parseJSON(errorData.response);
                    if (errorData.status==422) {//验证错误
                        $.each(response.errors,function (key,val) {
                            qsToast({type:2,context: val[0]});
                            return false;
                        });
                    }
                    else if(errorData.status==400) {//业务错误
                        qsToast({type:2,context: response.message});
                    }
                }
            });
        }

        /**
         * 验证用户名等是否重复
         * @param validType 验证类型
         * @param validValue 值
         * @returns {boolean|*}
         */
        function remoteValid(validType, validValue){
            var result = false;
            $.ajax({
                url: "{{route('register.check', ['utype'=>2])}}",
                cache: false,
                async: false,
                type: 'post',
                dataType: 'json',
                data: { type: validType, param: validValue },
                success: function(json) {
                    result= true;
                }
            });
            return result;
        }

        /**
         * 验证密码长度
         * @param value 密码
         * @returns {boolean}
         */
        function inputRegValiPassword(value){
            achoice = true;
            if(value.length>16 || value.length<6){
                achoice = false;
            }
            return achoice;
        }

        /**
         * 验证密码两次输入是否一致
         * @param password 第一次密码
         * @param passwordRepeat 第二次密码
         * @returns {boolean}
         */
        function inputRegValiPasswordRepeat(password,passwordRepeat){
            achoice = true;
            if(password!=passwordRepeat){
                achoice = false;
            }
            return achoice;
        }

        /**
         * 验证用户名
         * @param value 用户名
         * @returns {boolean}
         */
        function inputRegValiUsername(value){
            var achoice = true;
            if (!regularUsername.test(value)) {
                achoice = false;
            }
            return achoice;
        }

        /**
         * 验证邮箱
         * @param value 邮箱
         * @returns {boolean}
         */
        function inputRegValiEmail(value){
            var achoice = true;
            if (!regularEmail.test(value)) {
                achoice = false;
            }
            return achoice;
        }

        function IsCard(validType, validValue) {
            var result = false;
            $.ajax({
                url: "{{route('register.check', ['utype'=>2])}}",
                cache: false,
                async: false,
                type: 'post',
                dataType: 'json',
                data: { type: validType, param: validValue},
                success: function(json) {
                    result= true;
                }
            });
            return result;
        }


        function IsCardVali(validType, validValue){
            var result = false;
            $.ajax({
                url: "{{route('register.check', ['utype'=>2])}}",
                cache: false,
                async: false,
                type: 'post',
                dataType: 'json',
                data: { type: validType, param: validValue,vail:1 },
                success: function(json) {
                    result= true;
                }
            });
            return result;
        }

    </script>

@endsection