jQuery表单验证扩展及使用简单示例

1.当然是以jquery.min.js，jquery.validate.min.js为基础了，这个我不哆嗦了。

jQuery的优点还在于它良好的可扩展性，下面是扩展的示例，自定义的表单验证：
jQuery.extend(jQuery.validator.messages, {
businessHours : "<img src='" + WEB_ROOT
+ "/images/img_cw.gif' align='absmiddle' />请输入正确的营业时间",

allTelphone : "<img src='" + WEB_ROOT
+ "/images/img_cw.gif' align='absmiddle' />请按格式要求输入正确的联系电话"
});

//座机(区号-电话号码-分机号)
jQuery.validator.addMethod("telphone", function(value, element) {
return this.optional(element) || /(\d+)*-?\d{5,8}(-?\d+)*/.test(value);
}, jQuery.format(jQuery.validator.messages["telphone"]));

//营业时间
jQuery.validator.addMethod("businessHours", function(value, element) {
return this.optional(element) || /^\d{2}:\d{2}-\d{2}:\d{2}( \d{2}:\d{2}-\d{2}:\d{2}){0,2}$/.test(value);
}, jQuery.format(jQuery.validator.messages["businessHours"]));

//联系电话：包括座机，电话，特服电话
jQuery.validator.addMethod("allTelphone", function(value, element) {
return this.optional(element) || /^((0\d{2,3}-\d{7,8}){0,1}( {0,1}(13\d{9})|(15\d{9})|(18\d{9})){0,1}( {0,1}(4|8)00-\d{3}-\d{4}){0,1})$/.test(value);
}, jQuery.format(jQuery.validator.messages["allTelphone"]));


2.在jsp中使用：

$().ready(function() {
$('#your_form').validate();
}

下面是待表单元素验证：

<tr>
                          <td 联系电话：</td>
                          <td><input name="tel" type="text"  size="40" class="required allTelphone sh_input_zx120" maxlength="40" size="40"/><br /><span class="c999">允许输入固话(,区号-电话号码-分机号)、手机号及特服号码[格式400(800)-810-8188],同时有则按此顺序以半角空格隔开</span></td>
                      </tr>
     1.上面的  class="required allTelphone sh_input_zx120" required 表明了是必填项，验证方法是 allTelphone --这是扩展的验证方法。 最大长度是40， sh_input_zx120这个是项目的样式，与验证无关 。
            
                      <tr>
                          <td  >联系人：</td>
                          <td ><input name="contactPerson" type="text" class="sh_input_zx120" minlength="2" maxlength="10"/></td>
                      </tr>
2.验证最小长度是2，最大长度是10.

                      <tr>
                          <td align="right" >手机：</td>
                          <td align="left"><input name="contactMobile" type="text" value="${company.contactMobile }" class="mobilephone sh_input_zx120" minlength="11" maxlength="11" /></td>
                      </tr>
3.表明验证最大最小长度都是11位，mobilephone 方法验证。

                      <tr>
                          <td align="right" valign="top">电子邮箱：</td>
                          <td align="left"><input name="email" type="text" value="${company.email}" class="email sh_input_zx120" maxlength="50"/><span class="pl10 fonthui">例如：[e-mail]</span></td>
                      </tr>
4.最大长度50，框架的email 方法验证。

                       <tr>
                          <td align="right" valign="top">长期折扣：</td>
                          <td align="left"><input name="discount" type="text" class="number sh_input_zx120" max="10" maxlength="3"/><br /><span class="pl10 fonthui">适用于所有优惠券的最低折扣。例如：9.5 或  9。</span></td>
                      </tr>
5. 数字验证，框架的number 方法，最大值10. 最大长度是3

上面是一些简单示例与说明，与大家共享。

二。当然,更简洁的的验证引入方式是如下面：

/*==========加载时执行的语句==========*/
       $(function()
       {
           $("#your_form'").validate(
           {
               errorClass: "error",
               submitHandler: function(form)
               {
                   //如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
                   alert("submitted!");
               },
               rules: {
                   //为name为email的控件添加两个验证方法:required()和email()
                   email: { required: true, email: true }
               },
               messages: {
                   //为name为email的控件的required()和email()验证方法设置验证失败的消息内容
                   email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"}
               }

           });
       });