代码解析:
通过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. c语言数据结构学习心得——树

    树 一对多的树型结构,有且只有一个特定的根结点. 结点的度:结点拥有子树的数量{ 度为0:叶子结点/终端结点. 度不为0:非终端结点/分支结点(除去根结点其它称为内部结点).} 树的度:树中所有结点的 ...

  2. ActiveMQ消息队列的搭建和使用

    一.安装ActiveMQ(部署在centos7) 1.ActiveMQ官网下载地址:http://activemq.apache.org/download.html 2.解压安装包:tar xvzf  ...

  3. yyy的python3第七天学习

    望着小月亮:https://www.cnblogs.com/triple-y/ 请尊重原创:https://www.cnblogs.com/triple-y/p/9655753.html 第七天学习的 ...

  4. 【KMP】【字符串】KMP字符串匹配算法 学习笔记

    一.简介     KMP是由Knuth.Morris和Prat发明的字符串匹配算法,它的时间复杂度是均摊\(O(n+m)\).其实用Hash也可以做到线性,只不过Hash存在极其微小的难以避免的冲突. ...

  5. SPOJ - DISUBSTR 求串中子串的个数

    \(height\)简单应用 #include<iostream> #include<cstdio> #include<cstring> #include<c ...

  6. c# IList.ToList()后更改元素值会不会影响原列表的值

    class ListTest { public static void Test() { #region 值类型 var oListVal = new List<int>() { ,,, ...

  7. [转] electron实战开发详细流程

    [From] http://www.myk3.com/arc-8856.html 很久没有更新博客,人越来越懒了,唉 说好做的electron教程距离上次玩electron已经过去了好几个月了.. 这 ...

  8. centos yum安装高版本php,apache,mysql

    1.检查当前安装的PHP包 yum list installed | grep php 或者   yum list installed php* 如果要删除,可执行 yum remove php.x8 ...

  9. RBAC基于角色的权限访问控制

      RBAC是什么,能解决什么难题?ThinkPHP中RBAC实现体系安全拦截器认证管理器访问决策管理运行身份管理器ThinkPHP中RBAC认证流程权限管理的具体实现过程RBAC相关的数据库介绍Th ...

  10. spark运行时出现Neither spark.yarn.jars nor spark.yarn.archive is set错误的解决办法（图文详解）

    不多说,直接上干货! 福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑          ...