.net(C#)jQuery表单验证和ajax验证用户名是否存在

    这两天做过项目需要使用jQuery的validate组件,于是研究了下,从网上直接找的都不能用,后来在一篇文章中得到了启发,下面从以实例说明。

1.首先更改js/jquery.validate.js里的remote下面的success。

    查找remote: function(value, element, param) 依次往下找,看到

    $.ajax($.extend(true, {
     //url: param,这注释掉的一句是原来的改成下面的
     url: param.url,
     mode: "abort",
     port: "validate" + element.name,
     dataType: "json",
     //data: data,这注释掉的一句是原来的改成下面的
     data: param.data || data,
     success: function(response) { 

                    if (response.Result) {//if(response){ 

                         var errors = {}; 
                         errors[element.name] = response.Msg; 
                        // var submitted = validator.formSubmitted; 

                        // validator.prepareElement(element); 

                         //validator.formSubmitted = submitted; 

                         //validator.successList.push(element);  
                         validator.showErrors(errors); 

                    } 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); 
                     }//此处为新添加的success,执行成功的时候要操作的

2.加入aspx文件验证规则和错误提示的样式

<style>
em
{
            background:url("images/rdoBg.gif") no-repeat 0px 0px;
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
            font-variant:normal;
 }
    .success
    {
        background:url("images/rdoBg.gif") no-repeat 0px 0px;
    }
    .style1
    {
        width: 618px;
    }
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/selffun.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#commentForm").validate({
   //debug: true,
   //onfocusout:false,//失去焦点时不验证
   onkeyup:false,//键盘输入时不验证
   //onclick:false,
   //nsubmit:true,
   //focusInvalid:false,//提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 
   //focusCleanup:true, //如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用
   //remote:URL   //使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项remote: "check-email.php"
   rules: {
     uname: {
       required: true,
       minlength: 2,
       remote:{
      
          dataType:($.browser.msie) ? "text" : "xml",
          type: "post",        
          async: false,
          url: "/Ajax.asmx/CheckUid",
          data: {
               uid: function() {
               return $('#uname').val();
               },
               date:function(){
               return new Date();
               } 
              },
          dataFilter: function(dataXML) { 
                 if( typeof dataXML == "string" ){
                         xml = new ActiveXObject("Microsoft.XMLDOM");
                         xml.async = false;
                         xml.loadXML(dataXML);
                } else {
                         xml = dataXML;
                }

                 var result = new Object(); 

                 result.Result = jQuery(xml).find("Result").text(); 

                 result.Msg = jQuery(xml).find("Msg").text(); 

                 if (result.Result == "-1") { 

                     result.Result = false;  
                     return result; 
                 

                 else { 

                     result.Result = result.Result == "1" ? true : false;

                     return result; 
                 }
                 }//开始的时候在火狐和谷歌下验证可以通过,但在ie中就是不行,后来发现是在ie中jQuery无法解析html的原因,解决方案参考ie无法使用jquery解析xml的解决方法

         } 

    },
    email: {
     required: true,
     email: true
    },
 pass:{
  required:true,
  rangelength:[2,6]
  },
 qrpass:{
     required:true,
     equalTo:"#pass"
 },
 sfzh:{
     required:true,
     sfzh:true
 },
 phone:"phone"
   },
 
   messages: {
    uname: {
     required: '请输入姓名',
     minlength: '请至少输入两个字符'
    },
    email: {
     required: '请输入电子邮件',
     email: '请检查电子邮件的格式'
    },
 pass:{
    required:'请输入密码',
    rangelength:'请输入2-6个字符'
    },
    sfzh:{
      required:'请输入身份证号',
      sfzh:'请输入有效的身份证号'
    },
    qrpass:{
      required:'请输入确认密码',
      equalTo:'两次密码不一致'
    },
    phone:'电话号码格式不对'
   },
 
   errorElement: "em",     //用来创建错误提示信息标签
   success: function(label) {    //验证成功后的执行的回调函数
    //label指向上面那个错误提示信息标签em
    label.text(" ").addClass("success"); //加上自定义的success类
   }


   });
});
</script>

3./Ajax.asmx/CheckUid方法中代码:

   [WebMethod]

    public AjaxClass CheckUid(string uid)
    {

        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;

    }

}
[Serializable] 

 public class AjaxClass 

    public string Msg { get; set; } 

    public int Result { get; set; }

}

 

by 雪洁 2011-01-08 18:28:26 7162 views
我来说几句

相关文章