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">例如:aaa@bbb.com</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:"电子邮箱格式不正确"}
}

});
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值