jquery validate 一個註冊表單的應用

先看頁面

前端表單代碼  register.html

             <form class="mui-input-group" id="regForm">
                <div class="mui-input-row">
                    <label>帳號</label>
                    <input id='account' name="account" type="text" class="mui-input-clear mui-input" placeholder="請輸入帳號" required>
                </div>
                <div class="mui-input-row">
                    <label>密碼</label>
                    <input id='password' name="password" type="password" class="mui-input-clear mui-input" placeholder="請輸入密碼" required>
                </div>
                <div class="mui-input-row">
                    <label>確認</label>
                    <input id='password_confirm' name="password_confirm" type="password" class="mui-input-clear mui-input" placeholder="請確認密碼" required>
                </div>
                <div class="mui-input-row">
                    <label>郵箱</label>
                    <input id='email' name="email" type="email" class="mui-input-clear mui-input" placeholder="請輸入郵箱" required>
                </div>

                <div class="mui-content-padded">
                    <button id="reg" type="submit" class="mui-btn mui-btn-block mui-btn-primary">註冊</button>
                </div>
                <div class="mui-content-padded">
                    <p>註冊真實可用，註冊成功後的用戶可用於登陸，可是示例程序並未和服務端交互，用戶相關數據僅存儲於本地。</p>
                </div>
            </form>

所引用的js文件

        <script type="text/javascript" src="/Public/vendor/jquery/jquery.min.js"></script>
        <script src="/Public/vendor/layer/3.0/layer.js"></script>
        <script type="text/javascript" src="/Public/vendor/jquery.validation/jquery.validate.min.js"></script>
        <script type="text/javascript" src="/Public/vendor/jquery.validation/additional-methods.js"></script>
        <script type="text/javascript" src="/Public/vendor/jquery.validation/localization/messages_zh.js"></script>
        <script src="/Public/dist/js/common/jQuery.md5.js"></script>
        <script type="text/javascript">
            $(function(){
                let validate  = $("#regForm").validate({
                    onkeyup:false,
                    submitHandler:function(form){
                        $.ajax({
                            url: "__CONTROLLER__/register",
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                username: $("#account").val(),
                                password: $.md5($("#password").val())
                            },
                            success: function (data) {
                                if (data.status === 'success') {
                                    layer.msg('註冊成功請稍後....', {
                                        icon: 1,
                                        time: 3000,//3秒後跳轉
                                        end: function () {
                                            window.location.href = data.url;
                                        }
                                    });
                                } else {
                                    layer.msg(data.msg, {icon: 2, time: 3000})
                                }
                            }
                        });
                        return false;
                    },
                    rules:{
                        account:{
                            rangelength:[6,20],
                            //異步驗證用戶名是否存在
                            remote:{
                                url:"__CONTROLLER__/checkUserExist",
                                type:"post",
                                dataType:"json",
                                cache:false,
                                data:{
                                    account:function(){
                                        return $("#account").val();
                                    }
                                }
                            }
                        },
                        password:{
                            rangelength:[8,16],
                            checkPassStrength:true  //檢驗密碼強度
                        },
                        password_confirm:{equalTo:'#password'}
                    },
                    messages:{
                        account:{remote:'該用戶名已存在！'},
                        password_confirm:{equalTo:'請與密碼保持一致'}
                    },
                    //修改錯誤提示的樣式
                    showErrors: function (errorMap, errorList) {
                        var msg = "";
                        $.each(errorList, function (i, v) {
                            layer.tips(v.message , v.element, {
                                tips: [1, '#CCA32D'],
                                time: 2000
                            });
                            return false;
                        });
                    },
                });

            });
        </script>

在  additional-methods.js  這個文件裏添加了密碼強度的驗證方法

//密碼強度驗證
$.validator.addMethod("checkPassStrength", function(value, element, param){
    //方法中又有三個參數:value:被驗證的值， element:當前驗證的dom對象，param:參數(多個便是數組)
    //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]);
    return new RegExp(/(?=.*\d)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/).test(value);
}, "密碼至少包含字母、數字和特殊字符");

在後端驗證用戶名是否存在

/**
         * 查詢該用戶名是否存在
         */
        public function checkUserExist(){
            if(IS_POST){
                if(M('user')->where(array('username'=>I('account',0)))->find()){
//                    $this->ajaxReturn(array('status'=>'error','msg'=>'該帳戶名不存在！'));
                    exit("false") ;
                }else{
                    exit("true") ;
                }
            }
        }