jquery.validate.js 表单验证实例精选

2010-10-27 14:32:53 by 【6yang】, 514 visits, 收藏 | 返回

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"><head>

input.submit { float: none; }

input.error,select.error { border: 1px solid red; width: auto; }
label.error {
  background: url('./reg_files/unchecked.gif') no-repeat;
  padding-left: 16px;
  margin-left: .3em;
}
label.valid {
  background: url('./reg_files/checked.gif') no-repeat;
  width: 16px;
  height: 16px;
}
</style>

       $("input[type='text']").each(function(){
         $(this)
         .focus(function(){
          if($(this).val() == $(this).attr('notice')){
           $(this).val("");
          }
         })
         .blur(function(){
          if($(this).val() == $(this).attr('notice') || $.trim($(this).val()) == ""){
           $(this).val($(this).attr('notice'));
          }
         });
       });
   }

   this.cleannotice = function(){
       $("input[type='text']").each(function(){
         if($(this).val() == $(this).attr('notice')){
          $(this).val("");
         }
       });
   }

   this.unchange = function(){
       $(".select").bind('change',function(){
         if($(this).val() == '0'){
          $("#citySelect").attr("class","error").html('请选择区域').show();
          $("#RegionId").attr("class","error");
         }else{
          $("#citySelect").attr("class","valid").html('success').show();
          $("#RegionId").attr("class","valid");
         }
       });
   }

   this.addm = function(){
   jQuery.validator.addMethod("iszipcode", function(value, element) {
     var tel = /^[0-9]{6}$/;
     return this.optional(element) || (tel.test(value));
   }, "请正确填写您的邮政编码");

   jQuery.validator.addMethod("engname", function(value, element) {
     var tel = /^[a-zA-Z]*$/;
     return this.optional(element) || (tel.test(value));
   }, "请输入英文字符");
   }

   this.check = function(){
   $('#regist_form').submit(function(){
  aaa.cleannotice();

});

$("#regist_form").validate({
    rules: {
      Name: "required",
      engName:{
       required:true,
       engname:true,
       rangelength:[4,10]
   },
      Email: {
        required:true,
        email:true,
        rangelength:[4,50]
      },
      postCode: {
        required: true,
        rangelength:[6,6],
        iszipcode: true
      },
      phone: {
        required:true,
        number:true,
        rangelength:[11,11]
      }
    },
    messages: {
      Name: "请输入名字",
      engName: {
        required: "请输入英文名",
        rangelength: jQuery.format("长度请控制在{0} ~ {1}")
      },
      Email: {
        required: "请输入EMAIL",
        email: "请输入正确的EMAIL"
      },
      postCode: {
        required: "请输入邮编",
        rangelength:jQuery.format("长度必须是6位")
      },
      phone: {
        required: "请输入手机号",
        number: "请输入数字",
        rangelength: jQuery.format("长度必须是11位")
      }
    },
    success: function(label) {
      label.addClass("valid").text("succuess!");

    },
    submitHandler: function(form) {
   if($("#RegionId").val() == '0'){
    $("#citySelect").attr("class","error").html('请选择区域').show();
    $("#RegionId").attr("class","error");
   }else{
    $("#RegionId").attr("class","valid");
    $("#citySelect").attr("class","valid").html('success').show();
    form.submit();
   }
    }
});
   }

}
</script>
</head>
<body>
<br><br>

           名字： <input name="Name" id="Name" class="inputVal" tabindex="6005" type="text" value="请输入中文名字" notice="请输入中文名字" >
          <label class="error reminder" generated="true" for="Name" style="display: none;"></label>
        </div>
        <div class="clear"></div>

        <div class="td leftCol">
              区域选择： <select name="RegionId" id="RegionId" class="select" tabindex="6006">
                    <option value="0" selected="selected">行政区选择</option>
             <option value="12">浦东新区</option>
             <option value="42">松江区</option>
             <option value="41">金山区</option>

               邮政编码： <input name="postCode" id="postCode" class="inputVal" tabindex="6005" type="text" value="请输入邮编" notice="请输入邮编">
          <label class="error reminder" generated="true" for="postCode" style="display: none;"></label>
        </div>
        <div class="clear"></div>

<div class="td leftCol">
Email: <input name="Email" id="Email" class="inputVal" tabindex="6005" type="text" value="请输入Email" notice="请输入Email">

<html>
<script type="text/javascript">
  $(document).ready(function(){
   new regist().init();
  });
</script>

来源

http://blog.51yip.com/demo/regist.htm

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?cid=7&id=826

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

jquery.validate.js 表单验证实例精选

图片原图