代码解析:
通过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. 条目十二《切勿对slt容器的线性安全性又不切实际的依赖》

    条目十二<切勿对slt容器的线性安全性又不切实际的依赖> 这一条目,我想用简短而有力的语句来总结. stl库是为了照顾大多数情况,而不是某一领域,如果在库层次实现线性安全,很大可能是对性能 ...

  2. 利用PHP 简单实现加减法验证码

    <?php header('Content-Type: image/png'); $im = imagecreatetruecolor( 200 , 50 );//生成图片长宽 // Creat ...

  3. 【解决】Linux Tomcat启动慢--Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [236,325] milliseconds

    一.背景 今天部署项目到tomcat,执行./startup.sh命令之后,访问项目迟迟加载不出来,查看日志又没报错(其实是我粗心了,当时tomcat日志还没打印完),一开始怀疑是阿里云主机出现问题, ...

  4. springcloud微服务总结六

    SpringCloud实战7-Config分布式配置管理 分布式环境下的统一配置框架,已经有不少了,比如百度的disconf,阿里的diamand 官方文档对spring Cloud Config的描 ...

  5. json、xml

    json:(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然 ...

  6. Wannafly挑战赛26-F. msc的棋盘（模型转化＋dp）及一类特殊的网络流问题

    题目链接 https://www.nowcoder.com/acm/contest/212/F 题解 我们先考虑如果已知了数组 \(\{a_i\}\) 和 \(\{b_i\}\),如何判断其是否合法. ...

  7. P2468 [SDOI2010]粟粟的书架

    传送门 二合一题.... 前面 $50$ 分: 考虑取书显然优先取厚的,所以答案满足单调性 发现 $P_{i,j}$ 不大,所以考虑二分最小厚度 $mid$,把大于等于 $mid$ 的书取走 维护 $ ...

  8. artDialog不能拖拽的问题

    需要引用下面这个文件: https://github.com/aui/artDialog/edit/master/dist/dialog-plus.js

  9. POJ - 3261 后缀数组 height应用

    题意:求最少重叠\(k\)次的重复子串的最大长度 子串长度问题依然是二分枚举,可以观察出重叠的一定是sa排序中连续的 之前想出一种判断要\(n^2\)的方法,没有考虑到后面肯定会连续出现的情况 (大概 ...

  10. c++ 222

        [成功者的习惯]   1.背后说别人好话:听到某人说别人坏话时只微笑: 2.过去的事不全让人知道: 3. 尊敬不喜欢你的人:对事无情,对人有情: 4.多做自我批评:为别人喝彩: 5.感恩:学会 ...