jQuery.vilidation.js登录&注册-CSDN博客

代码解析:
通过ajax获取url路径链接php接口做登录和注册获取到的数据传到数据库.

ajax利用四步:
　　//1.创建一个ajax对象;
　　//2.打开请求；
　　　　　　//判断用户传递的是get还是post请求:
　　//3.发送数据:
　　//4.获取响应数据

php自写

登录和注册利用jQuery.validation.js


具体代码如下，仅做参考，多多指教

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>登录&注册</title>
        <style>
            *:focus {
                outline: none;
                /*清除input获取焦点时的蓝框*/
            }
            
            img {
                width: 30px;
                height: 30px;
                display: none;
            }
        </style>
    </head>

    <body>
　　　　　//引入jquery-1.9.1.j或jquery-3.1.1.js版本
        <script src="js/jquery-1.9.1.js"></script>
　　　　　//引入jquery.validata.min.js或者jquery.validata.js
        <script src="js/jquery.validate.min.js"></script>
　　　　　//这里的ajax是利用获取url路径链接php接口发送到数据库
        <script src="ajax.js"></script>
        <script>
            $(function() {
                var oUser = $('#username');
                var oPass = $('#password');
                var oSpan = $('#span');
                var oLgn = $('#lgn');
                var oReg = $('#reg');
                var oImg = $('#img');
                $('#demoForm').validate({
                    //规则
                    rules: {
                        username: { // 指的是input的name
                            required: true,
                            minlength: 6,
                            maxlength: 9
                        },
                        password: {
                            required: true,
                            minlength: 6,
                            maxlength: 9
                        }
                    },
                    //提示信息
                    messages: {
                        username: {
                            required: '此项必填！',
                            minlength: '用户名不少于6位',
                            maxlength: '用户名不超过9位'
                        },
                        password: {
                            required: '此项必填！',
                            minlength: '密码不少于6位',
                            maxlength: '密码不超过9位'
                        }
                    },

ignore:'#password', //忽略某个元素不校验
//$('#check').click(function(){
// alert($('#demoForm').valid()?'ok':'no');
//})
submitHandler:function(){
alert('校验全部通过');
},//*
focusInvald:true,
focusCleanUp:true,
errorElement:'div', //改变错误信息的标签
errorClass:'wrong',//错误时字体会变红
validClass:'right',
highlight:function(element,errorClass){//给未通过验证的元素加效果
$(element).addClass(errorClass);
$(element).fadeOut().fadeIn();
},
invalidHandler:function(validator){
//console.log(validator.numberOfInvalids());
alert('no');
},


                    submitHandler: function() {
                        oLgn.on('click', function() {
　　　　　　　　　　　　　　　　//user.php自写
                            myAjax('user.php', 'lgn', oUser.val(), oPass.val());
                        });
                        oReg.on('click', function() {

                            myAjax('user.php', 'add', oUser.val(), oPass.val());
                        });

                        function myAjax(url, act, userValue, passValue) {
                            $.ajax({
                                url: url,
                                data: {
                                    act: act,
                                    user: userValue,
                                    pass: passValue
                                },
                                beforeSend: function() {
                                    oImg.css('display', 'block');
                                },
                                success: function(res) {
                                    var json = eval('(' + res + ')');
                                    oSpan.html(json.msg);
                                },
                                complete: function() {
                                    oImg.css('display', 'none');
                                }
                            });
                        }
                    }
                });
            });
        </script>
        <form id="demoForm">
            <!--用户名-->
            <p>
                <label for="username">username :</label>
                <input type="text" name="username" id="username" />
            </p>

            <!--密码-->
            <p>
                <label for="password">password :</label>
                <input type="text" name="password" id="password" />
                <span id="span"></span>
            </p>

<p>
<label for="date">date :</label>
<input type="text" name="date" id="date"/>
</p>


<p>
<label for="email">email :</label>
<input type="text" name="email" id="email"/>
</p>


<p>
<label for="PostCode">PostCode :</label>
<input type="text" name="PostCode" id="PostCode"/>
</p>

            <!--提交按钮-->
            <p>
                <input type="submit" value="登录" id="lgn" />
                <input type="submit" value="注册" id="reg" />
                <img src="img/loading.jpg" id="img" />
            </p>

        </form>
    </body>
</html>

更多细节待续...