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") ;
                }
            }
        }