知识大全 Jquery 表单验证类介绍与实例

Posted 2022-07-20 长度

篇首语：一切节省，归根到底都归结为时间的节省。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 Jquery 表单验证类介绍与实例相关的知识，希望对你有一定的参考价值。

Jquery 表单验证类介绍与实例 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

<form action="" method="post" id="formValidate"> 数值 <input name= type=text validate="number" /><span></span><br/> 浮点型 <input name= type=text validate="decimal" /><span></span><br/> 英文 <input name= type=text validate="english" /><span></span><br/> 大写英文 <input name= type=text validate="upper_english" /><span></span><br/> 小写英文 <input name= type=text validate="lower_english" /><span></span><br/> 邮件格式 <input name= type=text validate="email" /><span></span><br/> 是否包含中文 <input name= type=text validate="chinese" /><span></span><br/> URL <input name= type=text validate="url" /><span></span><br/> 电话号码 <input name= type=text validate="phone" /><span></span><br/> IP地址 <input name= type=text validate="ip" /><span></span><br/> 金额 <input name= type=text validate="money" /><span></span><br/> 数值或者英文或者_ <input name= type=text validate="number_letter" /><span></span><br/> 邮政编码 <input name= type=text validate="zip_code" /><span></span><br/> 可用账号 <input name= type=text validate="account" /><span></span><br/> QQ <input name= type=text validate="qq" /><span></span><br/> 身份证:<input name= type=text validate="card" /><span></span><br/> 数值允许为空 <input name= type=text validate="number" empty= yes /><span></span><br/> 数值长度 <input name= type=text validate="number" min= max= /><span></span><br/> 数值长度允许为空 <input name= type=text validate="number" min= max= empty= yes /><span></span><br/> <input name= type=submit /> </form> <script src=jquery js type=text/javascript></script> <script src=formValidate js type=text/javascript></script> <script type=text/javascript> var formValidate = new formValidate(); formValidate init(); </script> [javascript] 代码如下: /* * 通用JS验证类 * 使用方法 * var formValidate = new formValidate(); * formValidate init(); * 注意 * <form action="" method="post" id="formValidate"> * id为formValidate * * <input name= type=text validate="zip_code" empty="yes" min= max= /><span></span> * validate="zip_code" 验证是否是邮政编码 * empty="yes" 验证是否允许为空 * min= 最小长度 * max= 最大长度 * <span></span> 显示提示内容 */ var formValidate = function () var _this = this; this options = number : reg : /^[ ]+$/ str : 必须为数字 decimal : reg : /^[ ] (d+)[ ]+(d+)$/ str : 必须为DECIMAL格式 english : reg : /^[A Za z]+$/ str : 必须为英文字母 upper_english : reg : /^[A Z]+$/ str : 必须为大写英文字母 lower_english : reg : /^[a z]+$/ str : 必须为小写英文字母 email : reg : /^([a zA Z ]+[_|_| ]?)*[a zA Z ]+@([a zA Z ]+[_|_| ]?)*[a zA Z ]+ [a zA Z] $/ str : Email格式不正确 chinese : reg : /[u E u FA uf ufa d]/ig str : 必须含有中文 url : reg : /^[a zA z]+://[^s]*/ str : URL格式不正确 phone : reg : /^[ ][ ][ ] $/ str : 电话号码格式不正确 ip : reg : /^(d+) (d+) (d+) (d+)$/ str : IP地址格式不正确 money : reg : /^[ ]+[ ][ ] $/ str : 金额格式不正确 number_letter : reg : /^[ a zA Z_]+$/ str : 只允许输入英文字母数字 _ zip_code : reg : /^[a zA Z ] $/ str : 邮政编码格式不正确 account : reg : /^[a zA Z][a zA Z _] $/ str : 账号名不合法允许字符字母下划线和数字 qq : reg : /[ ][ ] / str : QQ账号不正确 card : reg : /^(d )( | | )?(d )([ ]d)([ ]d)(d )(d|X)?$/ str : 身份证号码不正确 ; //初始化绑定表单选项 this init = function (options) this setOptions(options); this checkForm(); ; //设置参数 this setOptions = function (options) for (var key in options) if (key in this options) this options[key] = options[key]; ; //检测表单包括是否为空最大值最小值正则验证 this checkForm = function () $("#formValidate") submit(function () var formChind = $("#formValidate") children(); var testResult = true; formChind each(function (i) var child = formChind eq(i); var value = child val(); var len = value length; var childSpan = child next(); //属性中是否为空的情况 if (child attr( empty )) if (child attr( empty ) == yes && value == ) if (childSpan) childSpan ( ); return; //属性中min 和 max 最大和最小长度 var min = null; var max = null; if (child attr( min )) min = child attr( min ); if (child attr( max )) max = child attr( max ); if (min && max) if (len < min || len > max) if (childSpan) childSpan ( ); childSpan ( 字符串长度在 + min + 与 + max + 之间 ); testResult = false; return; else if (min) if (len < min) if (childSpan) childSpan ( ); childSpan ( 字符串长度应大于 + min); testResult = false; return; else if (max) if (len > max) if (childSpan) childSpan ( ); childSpan ( 字符串长度应小于 + max); testResult = false; return; //正则校验 if (child attr( validate )) var type = child attr( validate ); var result = _this check(value type); if (childSpan) childSpan ( ); if (result != true) childSpan ( + result); testResult = false; ); return testResult; ); ; //检测单个正则选项 this check = function (value type) if (this options[type]) var val = this options[type][ reg ]; if (!val test(value)) return this options[type][ str ]; return true; else return 找不到该表单验证正则项 ; ; cha138/Article/program/Java/JSP/201311/20490