之前已经有一篇关于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. 简化的nginx多进程模型demo

    //version 1:以下代码仅演示nginx多进程模型[test@vm c]$ cat mynginx.c#include <stdio.h> #include <string. ...

  2. ES聚合实例

    在es中需要根据app_categor进行聚合,JSON查询语句如下: { "query": { "bool": { "must": [ { ...

  3. 使用cglib动态创建java类

    转至:http://ckwang17.iteye.com/blog/963881 cglib 是一个开源项目! 是一个强大的,高性能,高质量的Code生成类库,它可以在运行期扩展Java类与实现Jav ...

  4. SpringMVC入门2-注解开发

    Spring MVC 注解开发 <context:component-scan base-package="com.controls" /> Springmvc的扫描器 ...

  5. 转：MySQL导入.sql文件及常用命令

    在MySQL Qurey   Brower中直接导入*.sql脚本,是不能一次执行多条sql命令的,在mysql中执行sql文件的命令: mysql> source   d:/myprogram ...

  6. ajax+json数据传输

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. C# .NET开发Oracle数据库应用程序

    .NET Framework访问Oracle数据库至少有两种方式,一种是利用微软提供的ADO.NET,另一种是利用Oracle提供的ODP.NET. 安装VS的时候会附带ADO.NET,安装Oracl ...

  8. rowspan和colspan

    1.说明 rowspan:跨行colspan:跨列用于设计复杂的表格 2.例子<!DOCTYPE html> <html> <head> <meta char ...

  9. Error on SVN checkout:SSL handshake failed

    最近遇到了一个恼火的问题,在Ubuntu上尝试用svn命令checkout一个https的repository时遇到个错误信息: svn: E175002: Unable to connect to ...

  10. [置顶] Putty管理私钥文件

    openssh中,ssh_keygen产生的私钥,id_rsa这种密钥putty是不认识的,必须先把它转换成ppk格式, Windows上如果你安装了git,它里面bin目录下就有ssh_keygen ...