首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

强大的jquery应验框架

2013-02-24 
强大的jquery验证框架?!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhtmlheadti

强大的jquery验证框架
?强大的jquery应验框架<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>validate.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script> <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script> </head><body><form action="" id="myForm"><input id="userName" name="userName" /><em>*</em><input id="age" name="age"/><em>*</em><input id="birthday" name="birthday"/><em>*</em><input id="tel" name="tel"/><em>*</em><input type="submit" value="提交" /></form><script type="text/javascript">$().ready(function() { initValidate();});jQuery.validator.addMethod("istel", function(value, element) { var decimal = /^-?\d+(\.\d{1,2})?$/; return this.optional(element) || (fucCheckTEL(value)); }, $.validator.format("不合法的电话号码!")); //电话号码function fucCheckTEL(TEL) { var i,j,strTemp; strTemp="0123456789-()# "; for (i=0;i<TEL.length;i++) { j=strTemp.indexOf(TEL.charAt(i)); if (j==-1) { //说明有字符不合法 return false; } } //说明合法 return true; } function initValidate() {$("#myForm").validate({rules : {'userName': {"required" : true,"minlength":10},'age' : {"required" : true},'birthday' : {"required" : true},'tel' : {"required" : true,"istel":true}}});}</script></body></html>


别人写的一个强大的检测

?
    $(document).ready(function(){? ????/*?设置默认属性?*/? ??$.validator.setDefaults({? ????submitHandler:?function(form)?{?form.submit();?}? ??});? ??//?中文字两个字节? ??jQuery.validator.addMethod("byteRangeLength",?function(value,?element,?param)?{? ????var?length?=?value.length;? ????for(var?i?=?0;?i?<?value.length;?i++){? ?????if(value.charCodeAt(i)?>?127){? ??????length++;? ?????}? ????}? ????return?this.optional(element)?||?(?length?>=?param[0]?&&?length?<=?param[1]?);? ??},?"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");? ????/*?追加自定义验证方法?*/? ??//?身份证号码验证? ??jQuery.validator.addMethod("isIdCardNo",?function(value,?element)?{? ????return?this.optional(element)?||?isIdCardNo(value);? ??},?"请正确输入您的身份证号码");? ????//?字符验证? ??jQuery.validator.addMethod("userName",?function(value,?element)?{? ????return?this.optional(element)?||?/^[\u0391-\uFFE5\w]+$/.test(value);? ??},?"用户名只能包括中文字、英文字母、数字和下划线");? ????//?手机号码验证? ??jQuery.validator.addMethod("isMobile",?function(value,?element)?{? ????var?length?=?value.length;? ????return?this.optional(element)?||?(length?==?11?&&?/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));? ??},?"请正确填写您的手机号码");? ????//?电话号码验证? ??jQuery.validator.addMethod("isPhone",?function(value,?element)?{? ????var?tel?=?/^(\d{3,4}-?)?\d{7,9}$/g;? ????return?this.optional(element)?||?(tel.test(value));? ??},?"请正确填写您的电话号码");? ????//?邮政编码验证? ??jQuery.validator.addMethod("isZipCode",?function(value,?element)?{? ????var?tel?=?/^[0-9]{6}$/;? ????return?this.optional(element)?||?(tel.test(value));? ??},?"请正确填写您的邮政编码");? ??$(regFrom).validate({? ??/*?设置验证规则?*/? ????rules:?{? ?????userName:?{? ??????required:?true,? ??????userName:?true,? ??????byteRangeLength:?[3,15]? ?????},? ?????password:?{? ??????required:?true,? ??????minLength:?5? ?????},? ?????repassword:?{? ??????required:?true,? ??????minLength:?5,? ??????equalTo:?"#password"? ?????},? ?????question:?{? ??????required:?true? ?????},? ?????answer:?{? ??????required:?true? ?????},? ?????realName:?{? ??????required:?true? ?????},? ?????cardNumber:?{? ??????isIdCardNo:?true? ?????},? ?????mobilePhone:?{? ??????isMobile:?true? ?????},? ?????phone:?{? ??????isPhone:?true? ?????},? ?????email:?{? ??????required:?true,? ??????email:?true? ?????},? ?????zipCode:?{? ??????isZipCode:true? ?????}? ????},? ??/*?设置错误信息?*/? ????messages:?{? ?????userName:?{? ??????required:?"请填写用户名",? ??????byteRangeLength:?"用户名必须在3-15个字符之间(一个中文字算2个字符)"? ?????},? ?????password:?{? ??????required:?"请填写密码",? ??????minlength:?jQuery.format("输入{0}.")? ?????},? ?????repassword:?{? ??????required:?"请填写确认密码",? ??????equalTo:?"两次密码输入不相同"? ?????},? ?????question:?{? ??????required:?"请填写您的密码提示问题"? ?????},? ?????answer:?{? ??????required:?"请填写您的密码提示答案"? ?????},? ?????realName:?{? ??????required:?"请填写您的真实姓名"? ?????},? ?????email:?{? ??????required:?"请输入一个Email地址",? ??????email:?"请输入一个有效的Email地址"? ?????}? ????},? ??/*?错误信息的显示位置?*/? ????errorPlacement:?function(error,?element)?{? ?????error.appendTo(?element.parent()?);? ????},? ??/*?验证通过时的处理?*/? ????success:?function(label)?{? ?????//?set???as?text?for?IE? ?????label.html("?").addClass("checked");? ????},? ??/*?获得焦点时不验证?*/? ????focusInvalid:?false,? ????onkeyup:?false? ??});? ????//?输入框获得焦点时，样式设置? ??$('input').focus(function(){? ????if($(this).is(":text")?||?$(this).is(":password"))? ?????$(this).addClass('focus');? ????if?($(this).hasClass('have_tooltip'))?{? ?????$(this).parent().parent().removeClass('field_normal').addClass('field_focus');? ????}? ??});? ????//?输入框失去焦点时，样式设置? ??$('input').blur(function()?{? ????$(this).removeClass('focus');? ????if?($(this).hasClass('have_tooltip'))?{? ?????$(this).parent().parent().removeClass('field_focus').addClass('field_normal');? ????}? ??});? ??});? ????jQuery.validator.addMethod("decimal",?function(value,?element)?{ ??var?decimal?=?/^-?\d+(\.\d{1,2})?$/; ??return?this.optional(element)?||?(decimal.test(value)); ??},?$.validator.format("小数位数不能超过两位!")); ????//自定义验证方法?检查长度小于等于100 ??jQuery.validator ??.addMethod("MaxLength100", ??function(value,?element)?{ ??$(element).blur(function()?{ ??????$(element).val($.trim($(element).val())); ??}); ??var?length?=?value.replace(/[^\x00-\xff]/g,"**").length; ??return?this.optional(element)||?(length?<=?100); ??},?"请输入一个长度最多是?100?的字符串");??

读书人精选
热点排行