Jquery 表单验证类介绍与实例_jquery 程序员文章站 2022-05-02 13:35:25 ... [html] 复制代码 代码如下: 数值:浮点型:英文:大写英文:小写英文:邮件格式:是否包含中文:URL:电话号码:IP地址:金额:数值或者英文或者_:邮政编码:可用账号:QQ:身份证:数值 允许为空:数值 长度 1-3:数值 长度 1-3 允许为空: [javascript] 复制代码 代码如下: /* * 通用JS验证类 * 使用方法: * var formValidate = new formValidate(); * formValidate.init({}); * 注意: * * id为formValidate * * * validate="zip_code" 验证是否是邮政编码 * empty="yes" 验证是否允许为空 * min=10 最小长度 * max=10 最大长度 * 显示提示内容 */ var formValidate = function () { var _this = this; this.options = { number : {reg : /^[0-9]+$/, str : '必须为数字'}, decimal : {reg : /^[-]{0,1}(\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-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, str : 'Email格式不正确'}, chinese : {reg : /[\u4E00-\u9FA5\uf900-\ufa2d]/ig, str : '必须含有中文'}, url : {reg : /^[a-zA-z]+:\/\/[^s]*/, str : 'URL格式不正确'}, phone : {reg : /^[1][3][0-9]{9}$/ , str : '电话号码格式不正确'}, ip : {reg : /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ , str : 'IP地址格式不正确'}, money : {reg : /^[0-9]+[\.][0-9]{0,3}$/ , str : '金额格式不正确'}, number_letter : {reg : /^[0-9a-zA-Z\_]+$/ , str : '只允许输入英文字母、数字、_'}, zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : '邮政编码格式不正确'}, account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : '账号名不合法,允许5-16字符,字母下划线和数字'}, qq : {reg : /[1-9][0-9]{4,}/ , str : 'QQ账号不正确'}, card : {reg : /^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\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.html(''); } 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 max) { if (childSpan) { childSpan.html(''); childSpan.html(' 字符串长度在' + min + '与' + max + '之间'); testResult = false; return; } } } else if (min) { if (len if (childSpan) { childSpan.html(''); childSpan.html(' 字符串长度应大于' + min); testResult = false; return; } } } else if (max) { if (len > max) { if (childSpan) { childSpan.html(''); childSpan.html(' 字符串长度应小于' + max); testResult = false; return; } } } //正则校验 if (child.attr('validate')) { var type = child.attr('validate'); var result = _this.check(value, type); if (childSpan) { childSpan.html(''); if (result != true) { childSpan.html(' ' + 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 '找不到该表单验证正则项'; } }; } 相关标签: Jquery 表单 验证类 上一篇: 有关于PHP中常见数据类型的汇总分享_php技巧 下一篇: JavaScript为事件句柄绑定监听函数实例详解_javascript技巧 推荐阅读 jquery中map函数与each函数的区别实例教程介绍 jquery表单验证实例仿Toast提示效果 Jquery 表单验证类介绍与实例 jquery中dom操作和事件的实例学习-表单验证 jQuery完成表单验证的实例代码(纯代码) jQuery HTML css()方法与css类实例详解 jQuery应用实例5:表单验证 PHP jQuery表单,带验证具体实现方法_php实例 jquery中map函数与each函数的区别实例教程介绍 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件_jquery