代码解析:
通过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. Codeforces Round #162 (Div. 2) A~D 题解

    A. Colorful Stones (Simplified Edition) time limit per test 2 seconds memory limit per test 256 mega ...

  2. 8、C++指针和自由存储空间

    8.C++指针和自由存储空间 计算机程序在存储数据时必须跟踪3中基本属性. 信息存储在何处 存储的值为多少 存储信息是什么类型. 指针是 一个变量,其存储的是值得内存地址 对于常规变量的地址,只需要对 ...

  3. Qt 学习之路 2（41）：model/view 架构

    Qt 学习之路 2(41):model/view 架构 豆子 2013年1月23日 Qt 学习之路 2 50条评论 有时,我们的系统需要显示大量数据,比如从数据库中读取数据,以自己的方式显示在自己的应 ...

  4. A printf format reference page (cheat sheet)

    Summary: This page is a printf formatting cheat sheet. I originally created this cheat sheet for my ...

  5. 最少拦截系统(线性dp)

    某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高度.某天,雷达捕捉到敌国的导弹来袭.由于 ...

  6. 精神AC合集 2018.4.3

    UESTC炸了,先把看似十分OK(只是过了样例)的代码贴上,修复好后再交上去 594 #include<iostream> #include<algorithm> #inclu ...

  7. nodejs下载器，通过chrome代理下载http资源

    var config={ //不想访问的东西,节约流量 "404":[ "http://qidian.qpic.cn/qdbimg" ], //奇数为需要下载的 ...

  8. archlinux安装交叉编译工具链

    1. 在/usr/local下新建文件夹:arm  [guo@archlinux local]$sudo mkdir arm 2. 将交叉编译工具拷贝到arm文件夹中  [guo@archlinux ...

  9. android上最多有多少个http连接？

    1.使用HttpUrlConnection能有几个 测试机器版本是5.1.1 个数 网络连接是否报错 写文件是否报错  1024  A/art: art/runtime/indirect_refere ...

  10. 文献综述六：基于JS 技术的电子商品管理系统设计及实现

    一.基本信息 标题:基于JS 技术的电子商品管理系统设计及实现 时间:2017 出版源:无线互联科技 文件分类:js技术的研究 二.研究背景 主要对Js下电商管理系统的设计及实现进行了探讨,利用软件工 ...