jquery.validate.js 的 remote 后台验证

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

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

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

要实现的效果：

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

1.checkhash.php

1
2
3
4
5
6
7
8
9
10
11
12
<?php
if($_GET)
{
    $hash = $_GET['hash'];
    if($hash == '123456')
    {
        echo 'true';
    }else{
        echo 'false';
    }
    exit();
}

2.checksel.php

1
2
3
4
5
6
7
8
9
10
11
12
<?php
if($_GET)
{
    $sel = $_GET['sel'];
    if($sel == 2)
    {
        echo 'true';
    }else{
        echo 'false';
    }
    exit();
}

3.changeusertype.php

1
2
3
4
5
6
7
8
9
10
11
12
<?php
if($_GET)
{
    $type = $_GET['type'];
    if($type == 2)
    {
        echo 'true';
    }else{
        echo 'false';
    }
    exit();
}

验证代码：

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

预览效果是这样的：

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

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

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

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

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

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

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

jquery validate remote验证唯一性的更多相关文章

  1. jQuery Validate 插件验证,,返回不同信息(json remote)自定义

    问题 申请账号需要确认该账号是存在 jquery.validate.js中的remote Jquery Ajax获取后台返回的Json数据后,添加自定义校验 解题思路:输入的登陆信息远程验证是否该账号 ...

  2. 1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.

    1)jquery  validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...

  3. jquery.validate remote 和 自定义验证方法

    jquery.validate remote 和 自定义验证方法 $(function(){ var validator = $("#enterRegForm").validate ...

  4. 封装jQuery Validate扩展验证方法

    一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...

  5. jquery validate扩展验证方法

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  6. 扩展jquery.validate自定义验证，自定义提示，本地化

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  8. 使用tooltip显示jquery.validate.unobtrusive验证信息

    通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = " ...

  9. jQuery Validate Ajax 验证

    jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...

随机推荐

  1. Windows Phone 8 应用内截图

    WriteableBitmap wb = new WriteableBitmap(this.LayoutRoot, new MatrixTransform()); //wb.Render(this.L ...

  2. Decorator模式设计模式

    装饰者模式定义:动态地将责任附加到对象上. 若要扩展功能.装饰者提供了比继续更有弹性的替代方案. 简单定义:包装一个对象.以提供新的行为. 装饰者模式能够有效应对类爆炸问题. OO原则: 对扩展开放, ...

  3. 基于VMware的虚拟Linux集群搭建-lvs+keepalived

    基于VMware的虚拟Linux集群搭建-lvs+keepalived 本文通过keepalived实现lvsserver的的双机热备和真实server之间的负载均衡.这方面的blog挺多,可是每一个 ...

  4. 对java中classloader使用的一点理解（转）

    先简单介绍下java的classloader,网上资料很多,就说点关键的. Java 中的类加载器大致可以分成两类,一类是系统提供的,另外一类则是由 Java 应用开发人员编写的.系统提供的类加载器主 ...

  5. 以太网PHY 芯片之 MII/MDIO接口详解

    本文主要分析MII/RMII/SMII,以及GMII/RGMII/SGMII接口的信号定义,及相关知识,同时本文也对RJ-45接口进行了总结,分析了在10/100模式下和1000M模式下的设计方法. ...

  6. SSL/TLS协议运行机制的概述(转)

    互联网的通信安全,建立在SSL/TLS协议之上. 本文简要介绍SSL/TLS协议的运行机制.文章的重点是设计思想和运行过程,不涉及具体的实现细节.如果想了解这方面的内容,请参阅RFC文档. 一.作用 ...

  7. Php面向对象 – 继承和重写

    Php面向对象 – 继承和重写 承受: php于,通过类.使用特殊的经营宗旨. 通过定义类,采用extends来表示当前的类对象继承该类的对象. 样例: class C { public  $p_c  ...

  8. Redis源代码分析（十一年）--- memtest内存测试

    今天,我们继续redis源代码test下测试在封装中的其它文件.今天读数memtest档,翻译了,那是,memory test 存储器测试工具..可是里面的提及了非常多东西,也给我涨了非常多见识,网上 ...

  9. boadWorld Mark!

    2014-11-21 xiazaiba.com>jiaocheng>972.html

  10. Android中的“再按一次返回键退出程序”实现[转]

    用户退出应用前给出一个提示是很有必要的,因为可能是用户并不真的想退出,而只是一不小心按下了返回键,大部分应用的做法是在应用退出去前给出一个Dialog,我觉得这样不太友好,用户还得移动手指去按dial ...