之前已经有一篇关于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. 【行为型】State模式

    状态模式其意图是在一个对象的状态发生变化时能够同时改变它的行为.一个生活中比较常见的例子就如你(是指你自己本人)在走时时,整个人全身的动作是双手臂前后慢慢摇摆且双脚也是一步一步慢慢往前移的,即:该走路 ...

  2. weekly review

    鉴于某位昔日工作在我身边的大师一直在写review,所以为了能靠近大师,我也要开始写review了. 无名师曾经说过,想要成为大师的话,要先找到一个大师,然后追随大师,再然后与大师通行,之后成为大师, ...

  3. WinPcap编程（三）

    1.过滤器设置 设置过滤器,得到你想要的哪种类型的包.Like WireShark. 过程:编译过滤器,然后设置过滤器.直接上参考文档的代码: if (d->addresses != NULL) ...

  4. Unity扩展编辑器--类型1：Editor Windows

    Extending the Editor Unity允许你使用自己定制的inspectors和Editor Windows扩展编辑器,并且你可以使用定制的Property Drawers定义属性集在i ...

  5. Unity3d在安卓android的更新(APK覆盖)

    其实这并没什么技术难点,也不是完美的热更新方案,只能说是退而求其次的一个方法. 起因主要是因为公司几个U3D项目在立项之初都没有能做好热更新的规化,导致现在要去做U3D的热更新非常难,并且项目已处于中 ...

  6. FLASK初步实践

    感觉经过DJANGO,CI,RAILS之类的WEB框架之后,FLASK的思路就比较顺畅了... FLASKR.PY import sqlite3 from flask import Flask, re ...

  7. 【转】Ubuntu Server 12.04 静态IP简洁配置

    原文网址:http://blog.csdn.net/njchenyi/article/details/8715417 1.配置静态IP地址: # vim /etc/network/interfaces ...

  8. delphi 通过控件的handle取得控件

    例子代码如下: vartsg:TstringGrid;begintsg:=Tstringgrid(FindControl(handle));//正常使用TstringGrid//tsg......./ ...

  9. Linux如何删除非空目录

    这个问题很basic,不过还是困扰了我一段时间.(这里主要讨论的是命令行模式下) 我本来觉得应该使用命令 rmdir 但是发现它无法删除非空的目录. 后来发现了原来应该使用命令 rm -rf 目录名 ...

  10. HDU2048(标准错排问题)

    错排问题. 将错排方法数记为D(n). 1. 把第n个元素放在一个位置,比如k,有n-1种方法. 2. 编号为k的元素有两种放法. <1> 把它放到位置n.那么对于剩下的n-2个元素,就有 ...