之前已经有一篇关于jquery.validate.js验证的文章，还不太理解的可以先看看：jQuery Validate 表单验证(这篇文章只是介绍了一下如何实现前台验证，并没有涉及后台验证remote方法)。

有时候我们不仅仅对表单所录入的信息进行验证还需要将录入的值与数据库进行比较，这时我们就需要借助remote方法来实现。这篇文章就是介绍 jquery.validate.js的后台验证的remote方法，准备工作，前台页面：

01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
05 <title>Insert title here</title>
06 <style type="text/css">
07 form{max-width:800px; margin:0 auto;}
08 form label{display:inline-block;width:150px; text-align:right;}
09 fieldset{margin-bottom:25px;}
10 legend {
11     border: 1px solid #77848D;
12     font-family: "Arial";
13     font-size: 14px;
14     margin-left: 15px;
15     padding: 5px;
16 }
17 em.error{font-weight:normal; color:red;}
18 </style>
19 <script src="test/jquery.js" type="text/javascript"></script>
20 <script src="test/jquery.validate.js" type="text/javascript"></script>
21 <script src="test/jquery.validate.message_cn.js" type="text/javascript"></script>
22  
23 </head>
24 <body>
25 <form name="test" id="testform" method="get" action="get.php">
26     <fieldset>
27     <legend title="用户注册(User Register)">用户注册(User Login)</legend>
28     <p>
29         <label for="name">用户名：</label>
30         <input id="name" name="name" type="text" />
31     </p>
32     <p>
33         <label for="mail">邮箱:</label>
34         <input id="mail" name="mail" type="password" />
35     </p>
36     <p>
37         <label for="password">密码：</label>
38         <input id="password" name="password" type="password" />
39     </p>
40     <p>
41         <label for="repassword">重复密码：</label>
42         <input id="repassword" name="repassword" type="password" />
43     </p>
44     <p>
45         <label for="hash">邀请码：</label>
46         <input id="hash" name="hash" type="text" />
47     </p>
48     <p>
49         <label for="sel">选择：</label>
50         <select id="sel" name="sel">
51             <option value="">请选择</option>
52             <option value="1">选择1</option>
53             <option value="2">选择2</option>
54             <option value="3">选择3</option>
55             <option value="4">选择4</option>
56         </select>
57     </p>
58     <p>
59         <label for="type">用户类型：</label>
60         <span><input  name="type" type="radio" value="1" />类型1</span>
61         <span><input  name="type" type="radio" value="2" />类型2</span>
62         <span><input  name="type" type="radio" value="3" />类型3</span>
63     </p>
64     <p>
65         <label for="submit">&nbsp;</label>
66         <input class="submit" type="submit" value="注册"/>
67     </p>
68     </fieldset>
69 </form>
70 </body>
71 </html>

要实现的效果：

由图可知我们要准备三个远程验证的文件(这里只是做到这种效果，就不连接数据库查找数据了，如果要和数据库的数据进行匹配原理是一样的，在这里就不赘述查找数据的方法了，相信程序员们都该掌握数据库的操作才行。在这里我们直接定义一个变量来进行匹配)：

1.checkhash.php

01 <?php
02 if($_GET)
03 {
04     $hash = $_GET['hash'];
05     if($hash == '123456')
06     {
07         echo 'true';
08     }else{
09         echo 'false';
10     }
11     exit();
12 }

2.checksel.php

01 <?php
02 if($_GET)
03 {
04     $sel = $_GET['sel'];
05     if($sel == 2)
06     {
07         echo 'true';
08     }else{
09         echo 'false';
10     }
11     exit();
12 }

3.changeusertype.php

01 <?php
02 if($_GET)
03 {
04     $type = $_GET['type'];
05     if($type == 2)
06     {
07         echo 'true';
08     }else{
09         echo 'false';
10     }
11     exit();
12 }

验证代码：

01 <script type="text/javascript">
02 $(function(){
03     $("#testform").validate({
04         rules : {
05                 name : {
06                         required : true
07                 },
08                 password: {
09                 required: true,
10                 minlength: 5
11             },
12             repassword: {
13                 required: true,
14                 minlength: 5,
15                 equalTo: "#password"
16             },
17             hash: {
18                 required: true,
19                 remote: 'checkhash.php'
20             },
21             sel: {
22                 remote: 'checksel.php'
23             },
24             type: {
25                 remote:{
26                     url: "changeusertype.php",
27                     type: "get",
28                     dataType: 'json',
29                     data: {
30                         'type': function(){return $('input[name="type"]:checked').val();}
31                     }
32             }
33             <span></span>}
34         },
35         messages : {
36             name : {
37                     required : '必填'
38             },
39             password: {
40             required: '必填',
41             minlength: '最少5个字符'
42         },
43         repassword: {
44             required: '必填',
45             minlength: '最少5个字符',
46             <span></span>equalTo: '两次输入的密码不一样'
47         },
48         hash: {
49             required: '必填',
50             remote: '邀请码不正确'
51         },
52         sel: {
53             remote: '选择不正确'
54         },
55         type: {
56             remote: '类型不可更改'
57         }
58         },
59     focusInvalid: true,
60         /*指定错误信息位置*/
61     errorPlacement: function (error, element) {
62             error.appendTo(element.closest("p"));
63     },
64     //设置错误信息存放标签
65     errorElement: "em",
66         submitHandler: function(form) {
67     }
68     });
69 })
70 </script>

预览效果是这样的：

这样似乎已经达到了要求，但是有一个小问题当我们输入正确的值里点击提交出现了这样的问题(邀请码和选择的验证没有问题，但是单选按钮的出现了问题)：

这是为什么？查阅了一些资料，在验证时会判断之前有没有验证过，当有验证过并有previousValue值时它就会忽略再次提交的值而是取上一次验证结果显示，有很多解决方法都是说更改源码，其它可以不用，我们在提交表单之前先清空之前一次验证绑定的previousValue值，这样就解决问题了。我们在验证方法之前加一个清空previousValue值的函数：

1 function emptyValue()
2 {
3     if($('input[name="type"]').data("previousValue"))
4         $('input[name="type"]').data("previousValue").old = null;
5     return true;
6 }

在提交表单之前调用这个方法：

1 <input class="submit" onclick="emptyValue()" type="submit" value="注册"/>

现在应该是这样的效果了(选择正确的用户类型点击提交应该可以通过验证)：

这个问题是在工作时碰到的，纠结了好久是改源码呢还是不改呢，最后找到了解决方法，在闲暇的时间整理了一下，现在贴出来以作参考，如果你有更好的方法也可以告诉我哦！

（转）jquery.validate.js 的 remote 后台验证的更多相关文章

  1. 关于Jquery.validate.js中动态删除验证remove方法的Bug

    利用Jquery.validate.js 来做动态验证的时候,需要特定的情况下,删除添加opAmount的必须入力的Check $("#form").validate({ rule ...

  2. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  3. jquery.validate.js自定义表单验证

    $(document).ready(function() { //在下列位置输入页面加载的逻辑代码 $("#inputForm").validate({ rules: { seq: ...

  4. jquery.validate.js的remote用法

    <script> $(function(){ $("#myform").validate( { rules: { name:{required:true,rangele ...

  5. 典型的一次jQuery.validate.js 表单中的验证应用

    var validateOption = { onkeyup:false, rules:{ password:{ required:true, remote:{ url:'index.php?app= ...

  6. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  7. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  8. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  9. jQuery表单验证插件——jquery.validate.js

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...

随机推荐

  1. 最全CSS3选择器

    一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 ...

  2. linux 配置 sphinx 全文搜索引擎

    因为公司网站需要,最近在弄sphinx搜索引擎,也是遇到各种问题,最终终于解决了. 服务器系统:centos7 (64位) 详情看安装官网的安装教程进行 coreseek 3.2.14 这里只提一些注 ...

  3. 如何把powerpoint幻灯片大小改为标准或宽屏教程【图文】

    不知道大家还记得早期powerpoint版本,幻灯片的形状是较方(4:3),随着科技的发展,很多电视.视频都在用宽屏,powerpoint自然也是如此,现在默认的幻灯片大小是宽屏 (16:9),怎么把 ...

  4. 符合altium designer操作习惯的cadence快捷键设置

    本人开始学习画PCB的时候,用的都是protel,后来转投altium desinger,因为这两个软件上手快且大学里教的也就是这两种.但由于工作需要换成cadence,这就给我造成了很大的困扰,尤其 ...

  5. Develop a Packet Sniffer with libpcap

    Develop a Packet Sniffer with libpcap: http://vichargrave.com/develop-a-packet-sniffer-with-libpcap/

  6. Cracking the coding interview--Q2.2

    Implement an algorithm to find the kth to last element of a singly linked list. 实现一个算法寻找链表中倒数第K个数.. ...

  7. 揭开.NET消息循环的神秘面纱（GetMessage()无法取得任何消息，就会进入Idle（空闲）状态，进入睡眠状态（而不是Busy Waiting）。当消息队列不再为空的时候，程序会自动醒过来）

    揭开.NET消息循环的神秘面纱(-) http://hi.baidu.com/sakiwer/item/f17dc33274a04df2a9842866 曾经在Win32平台下奋战的程序员们想必记得, ...

  8. iPhone之为UIView设置阴影(CALayer的shadowColor，shadowOffset，shadowOpacity，shadowRadius,shadowPath属性)

    效果图: 以下代码实现: 第一个图片的代码 //加阴影--任海丽编辑 _imageView.layer.shadowColor = [UIColor blackColor].CGColor;//sha ...

  9. mysql rr和rc区别

    <pre name="code" class="html">1. 数据库事务ACID特性 数据库事务的4个特性: 原子性(Atomic): 事务中的 ...

  10. BZOJ1646: [Usaco2007 Open]Catch That Cow 抓住那只牛

    1646: [Usaco2007 Open]Catch That Cow 抓住那只牛 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 634  Solved ...