[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由



[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由


return uid == "testuid" ? true : false;
}

 

相当的简单，就是判断下用户名是不是指定的用户名。

注意：webservice.cs中必须将[System.Web.Script.Services.ScriptService]这个特性取消注释，否则AJAX验证将无效！

 

第二点：默认jQuery.Validate在进行AJAX验证时返回必须是bool类型，如何返回一个对象包括错误消息及验证结果？（具体见App_Code/WebService.cs/CheckUid）

在第一点中介绍jQuery.Validate知识的时候就提到了，jQuery.Validate默认直接收true或false，但是在具体的开发中，我们会分层开发，三层或者多层，webservice在接收到验证请求后不做具体的处理直接调用逻辑层的验证方法，交由逻辑层进行验证操作（当然你也可以把验证全部写在webservice中，但是这样就体现不出分层的好处了），此时的验证会产生多种情况，以最常见的用户名验证为例：

1）用户名已存在，此时的消息应该是“用户名已存在，请重新输入！”

2）用户名不符合规则，此时的消息应该是“用户名不符合规则，请重新输入！”

3）验证时出现程序异常，此时的消息应该是“程序出现异常，请联系管理员！”

可以看出，仅仅一个用户名验证就会出现这3种信息，如果不返回一个明确的消息，仅仅告诉用户“用户名有误”，客户端的使用者将会相当的痛苦，因为使用者并不知道他的用户名输入到底错在哪了。

所以为了更好的客户体验，以及项目的合理性，我们在服务器端封装一个实体类（具体见AppCode/AjaxClass），代码如下：

1
2
3
4
5
6
[Serializable]
public class AjaxClass
{
    public string Msg { get; set; }
    public int Result { get; set; }
}

就是一个最简单的实体类，有2个属性，Msg和Result，Msg用于存放验证失败的信息，Result用于存放结果。

 

看下WebSerivce的代码如何修改：

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
[WebMethod]
public AjaxClass CheckUid(string uid)
{
    //return uid == "testuid" ? true : false;
    AjaxClass ajaxClass = new AjaxClass();
    try
    {
        if (uid == "testuid")
        {
            ajaxClass.Msg = "用户名已存在,请重新输入!";
            ajaxClass.Result = 0;
        }
        else if (uid.IndexOf("test") == -1)
        {
            ajaxClass.Msg = "用户名格式不正确,用户名必须包含test,请重新输入!";
            ajaxClass.Result = 0;
        }
        else
        {
            ajaxClass.Msg = "格式正确!";
            ajaxClass.Result = 1;
        }
    }
    catch
    {
        ajaxClass.Msg = "程序出现异常,请联系管理员!";
        ajaxClass.Result = 0;
    }
    return ajaxClass;
}

上面的WebService就完整的实现了我先前说的3种错误情况（由于这边仅仅是例子所以就只有表示层，实际开发中需要分层开发，此代码应该放入业务逻辑层）

注意：在webservice返回值前，如果检查成功必须要为ajaxClass.Result = 1，否则客户端验证会无法通过。

虽然完成了服务器端的代码修改，但是直接运行页面还是会出错，这是因为我上面所说过的，jQuery.Validate的remote远程的输出只能是true或者false，我们来看下具体的代码，其中注释掉的就是原来官方的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
success: function(response) {
    if (response.Result) {//if(response){
        var submitted = validator.formSubmitted;
        validator.prepareElement(element);
        validator.formSubmitted = submitted;
        validator.successList.push(element);
        validator.showErrors();
    } else {
        var errors = {};
        //errors[element.name] = response.Result || validator.defaultMessage(element, "remote");
        errors[element.name] = response.Msg;
        validator.showErrors(errors);
    }
    previous.message = response.Msg; //previous.valid = response;
    previous.valid = response.Result;
    validator.stopRequest(element, response.Result);
}

可以看到一共修改了3处地方：

1、判断返回值，原来是直接判断response，现在则是判断response.Result，因为现在的response已经是一个包含消息及结果的对象了。

2、错误消息，原来的错误消息是直接获取默认配置好的消息，我这边是获取response.Msg。

3、设置previous对象，将previous对象的消息和结果设置为AJAX返回的消息和结果，以供jQuery.Validate下面代码的返回。


这样jQuery.Validate的remote的方法就修改了，但是并没有结束，原因是先前在AJAX提交参数的时候由于jQuery.Validate的验证规则的缘故，提交的参数并不是以JSON的格式提交的而是以{uid:function()}这样的方式，结果就导致了无法设置jQuery.AJAX的contentType:”application/json; charset=utf-8″，如果设置了会出现以下错误：

pic24这样从webservice返回的AjaxClass对象就无法像以往的JSON方式直接操作了，所以我们只能换一种格式——XML，因为webservice默认返回的数据是XML格式：

1
2
3
4
5
<?xml version="1.0" encoding="utf-8" ?>
  <Msg>用户名格式不正确,用户名必须包含test,请重新输入!</Msg>
  <Result>0</Result>
  </AjaxClass>

接下来看下具体的remote方法应该如何编写，设置dataType:”xml”，然后将XML数据转换成一个对象以供上面我修改的jQuery.Validate的remote方法中ajaxsuccess的使用，具体看一下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
remote:{
    type: "POST",
    dataType:"json",
    async: false,
    url: "WebService.asmx/CheckUid",
    data: {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}},
    dataFilter: function(dataXML) {
        var result = new Object();
        result.Result = jQuery(dataXML).find("Result").text();
        result.Msg = jQuery(dataXML).find("Msg").text();
        if (result.Result == "-1") {
            result.Result = false;
            return result;
        }
        else {
            result.Result = result.Result == "1" ? true : false;
            return result;
        }
    }
}

就是jQuery.Ajax方法dataFilter，可以在AJAX请求成功后将数据进行过滤处理，这里我就使用了jQuery方法把结果和消息从XML中获取出来直接赋给一个对象，再将这个对象返回，交由ajaxsuccess使用。

这样就算是完成了修改jQuery.Validate的remote方法，使得可以返回验证结果及验证消息，看下效果图：

pic25

 

第三点：在反复使用jQuery.Validate进行AJAX验证时，总是需要编写相关AJAX参数，可否进行进一步封装？（具体见High-3.aspx和jquery.validate.extension.js）

在开发一个系统的时候经常会用到AJAX的验证，而如果每次都要编写上面那么多的代码还是很不方便，所以我现在就来进行一下简单的封装，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//远程验证抽象方法
function GetRemoteInfo(postUrl, data) {
    var remote = {
        type: "POST",
        async: false,
        url: postUrl,
        dataType: "xml",
        data: data,
        dataFilter: function(dataXML) {
            var result = new Object();
            result.Result = jQuery(dataXML).find("Result").text();
            result.Msg = jQuery(dataXML).find("Msg").text();
            if (result.Result == "-1") {
                result.Result = false;
                return result;
            }
            else {
                result.Result = result.Result == "1" ? true : false;
                return result;
            }
        }
    };
    return remote;
}

这个函数主要接收2个参数，一个是远程验证的路径和需要提交的参数，返回包装好的remote对象。

页面调用也很简单，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="scripts/jquery.validate.extension.js" type="text/javascript"></script>
    <script type="text/javascript">
        function InitRules() {
            var dataInfo = {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}};
            var remoteInfo = GetRemoteInfo('WebService.asmx/CheckUid', dataInfo);
            opts = {
             rules:
                {
                    <%=txtUid.UniqueID %>:
                    {
                        required: true,
                        remote:remoteInfo
                    }
                }
            }
        }
    </script>

怎么样？相比上面的代码一下子干净了很多吧？

页面上只要做3步操作：

1、包装好需要提交的data对象。

2、将远程验证地址和包装好的data对象传递给封装好的方法获取remote对象。

3、将函数返回的remote对象放入规则中。

 

至此使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由这一系列就算全部写完了，大体上将jQuery.Validate在ASP.NET上的一些常见应用讲了一下，同时也提出了许多我自己修改扩展的东西，希望对正在苦恼客户端验证的朋友有所帮助，谢谢大家的支持了！

PS：1、其实这一系列并没有把jQuery.Validate的所有功能介绍完，比如onfocusin，onfocusout，onkeyup等，这些就需要大家在使用的过程中自己查看源代码实验了。

2、本文有点长，而且内容比较多，如果文中有什么错误或者有指导意见欢迎大家提出来，谢谢了！

源代码下载：点我下载