代码解析:
通过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. SDK 开发 .a .framework .bundle (xcode引用) 依赖sdk工程

    一. 静态库.a 1.创建静态库工程 Cocoa Touch Static Libray  ,然后可以创建一个测试视图 TestView 2.暴露头文件 -> Build Phases--> ...

  2. Qt 学习之路 2（46）：视图和委托

    Home / Qt 学习之路 2 / Qt 学习之路 2(46):视图和委托 Qt 学习之路 2(46):视图和委托  豆子  2013年3月11日  Qt 学习之路 2  63条评论 前面我们介绍了 ...

  3. 原生JS实现返回顶部和滚动锚点

    ;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...

  4. payload指安全测试数据

    payload,翻译过来是有效载荷 通常在传输数据时,为了使数据传输更可靠,要把原始数据分批传输,并且在每一批数据的头和尾都加上一定的辅助信息,比如数据量的大小.校验位等,这样就相当于给已经分批的原始 ...

  5. LCT小小结

    模板题P3690 基础题P3203[HNOI2010]弹飞绵羊 \(access\)是搞出一条端点为\(x,y\)的路径 , 且维护的是实子树的信息 . 由于题目比较简单 , \(access\)时还 ...

  6. 江西理工大学南昌校区排名赛 A: 单身狗的卡片游戏

    题目描述 萌樱花是一只单身狗. 萌樱花今天在桌子上摆出了N张卡片,每张卡片i写着一个数字Ai 他不喜欢卡片上的数字多个出现,于是他想搞点事情拆分它们. 从桌子上选出三张卡,去掉一张数字最大,一张数字最 ...

  7. session.flush()与session.clear()的区别及使用环境

    [From] http://blog.csdn.net/leidengyan/article/details/7514484 首先session是有一级缓存的,目的是为了减少查询数据库的时间,提高效率 ...

  8. PIE SDK地图图层控制

    1. 功能简介 地图图层控制就是图层的相关操作,如地图图层数据的添加.删除.移动和拖拽等功能. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 图层添加是调用AddLayer方法将图层添加到 ...

  9. Java基础24-文档注释

    格式: /** .......*/ /** 此类是对数组进行取最大值 @author 深海溺心 @version 1.0 */ public class Compare{ private Compar ...

  10. 日志logback

    http://tengj.top/2017/04/05/springboot7/ ------------------ logback使用指南. 公司配置 <?xml version=" ...