代码解析:
通过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: ,

                            maxlength:

                        },

                        password: {

                            required: true,

                            minlength: ,

                            maxlength:

                        }

                    },

                    //提示信息

                    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>

更多细节待续...

jQuery.vilidation.js登录&注册的更多相关文章

  1. Vue.js 登录注册实现

    转载 http://www.jb51.net/article/118003.htm

  2. jquery.validate.js remote （php）

    网上的人不厚道呀 validate 这玩意的异步是 返回的 echo 'true'  或者 echo 'false';很少有人说呀~.~  转载了一篇原文: jquery.validate.js对于数 ...

  3. JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册

    写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...

  4. node.js实现简单的登录注册页面

    首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...

  5. 2.node.js (二)服务器登录注册 与 包的发布

    get: 不安全 小 2k 数据会在地址栏上显示 从服务器获取 快 post: 相对安全 https 大 1G 不会 向服务器发送 慢 get:直接解析url地址 借助 url模块 var urlOb ...

  6. node.js连接数据库登录注册，修改用户（页面的ajax请求）

    首先给大家看一下目录结构,结构如下: index.html 首页(显示所有的用户信息) login.html 登录页 register.html 注册页 db.js 配置链接数据库参数 dbhelpe ...

  7. js验证登录注册

    js验证登录注册的优势,在前台直接验证,不需要在后台读取返回数据验证,减轻服务器压力. 登陆验证得必要性,拦截恶意脚本的登录注册攻击.哈哈,当然有些高手是可以直接跳过js验证的. 所以还是后台验证,并 ...

  8. 通过jquery.cookie.js实现记住用户名、密码登录功能

    Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jq ...

  9. vue.js+koa2项目实战（三）登录注册模态框

    登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...

随机推荐

  1. WCF 客户端连接慢

    WCF客户端第一次连接超过1分钟,以后再连接就快了. 在 Config中加入 <basicHttpBinding> <binding name="BasicHttpBind ...

  2. 自已的sql server练习小记

    print getdate(); print datediff(year,'1987-09-13',getdate()) select * from CallRecords select top 5 ...

  3. 未在本地计算机上注册microsoft.jet

      未在本地计算机上注册microsoft.jet http://www.microsoft.com/zh-cn/download/confirmation.aspx?id=13255

  4. Codeforces - 912B 位运算

    求[1,n]内k的值的异或和使其值最大 k=1是肯定是n k>1,设pos是n的最高位,那答案就是(1ll<<(pos+1))-1 这里用到一个性质是当S=2^i-1时,a xor ...

  5. 设置input placeholder的样式

    ::-webkit-input-placeholder {/*Chrome/Safari*/ font-family: 'Avenir', Helvetica, Arial, sans-serif; ...

  6. h5列表页的性能优化

    //0.还原状态 caoke.loading=false $(".loadbtn").text("点击加载更多") //1 还没有任何数据的情况 if(data ...

  7. 【Python】urlopen小结

    0X00   简介 urlopen是urllib的的一个方法,它属于类文件对象,具有文件对象的方法,如read()等,同时也具有自身的一些方法: 1.info() 返回响应包的头信息 2.info() ...

  8. python 学习笔记二_列表

    python不需要声明类型信息,因为Python的变量标识符没有类型. 在Python中创建一个列表时,解释器会在内存中创建一个类似数组的数据结构类存储数据,数据项自下而上堆放(形成一个堆栈).索引从 ...

  9. SQL手工注入学习 一

    sql注入:    (基于DVWA环境的sql注入) 流程:    1.判断是否有SQL注入漏洞    2.判断操作系统.数据库和web应用的类型    3.获取数据库信息看,包括管理员信息(拖库)  ...

  10. Nginx设置日志分割方法

    目标:nginx cronolog日志分割配置文档,每分钟分割一次NGINX访问日志. 大体步骤如下: 1.nginx日志配置 access_log /var/log/nginx/access.log ...