日期:2014-05-17  浏览次数:20736 次

jquery自带表单验证form用法示例
首先下载一个已写好的验证jquery库:jquery验证库,解压后放在js文夹里面,在你的当前页面引用jquery验证表单库路径:
例如:
JavaScript代码
  <script type="text/javascript" src="XXXXX/js/jquery.validate.js"></script>
下面是引用后验证具体用法:
JavaScript代码
<script type="text/javascript">  
$(document).ready(function() {  
  $("#creator_2").validate({  
  rules:{  
  province:{  
  required: true  
  },  
  city:{  
  required: true  
  },  
  area:{  
  required: true  
  },  
  s_name:{  
  required: true,  
  minlength: 2,  
  maxlength: 10  
  },  
  s_email:{  
  required: true,  
  email:true,  
  maxlength:30  
  },  
  s_address:{  
  required: true,  
  minlength: 5,  
  maxlength: 100  
  },  
  s_tel:{  
  required: true,  
  minlength: 7,  
  maxlength: 15  
  }  
  },  
  messages:{  
  province:{  
  required: "请选择省份"  
  },  
  city:{  
  required: "请选择城市"  
  },  
  area:{  
  required: "请选择区域"  
  },  
  s_name:{  
  required: "请填写姓名",  
  minlength:"姓名最少为2个字符",  
  maxlength:"姓名最长为10个字符"  
  },  
  s_email:{  
  required: "请填写邮箱",  
  email:"请填写正确的格式",  
  maxlength:"邮箱最多30个字符"  
  },  
  s_address:{  
  required:"请填写收货地址",  
  minlength:"收货地址最少为5个字符",  
  maxlength:"收货地址最多为100个字符"  
  },  
  s_tel:{  
  required:"请填写电话号码",  
  minlength:"电话号码最少为5个字符",  
  maxlength:"电话号码最多为13个字符"  
  }  
  }  
  });  
  });  
</script>  
注:creator_2是form的ID号,province,s_email这些都是表单的元素的ID,最好给他们起名字和ID号是一样的,方便操作。格式如下:
XML/HTML代码
<input name="s_email