十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要讲解了jQuery如何实现高度灵活的表单验证功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联建站专注于企业成都全网营销推广、网站重做改版、庄河网站定制设计、自适应品牌网站建设、成都h5网站建设、电子商务商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为庄河等各大城市提供网站开发制作服务。
表单验证是前端开发过程中常见的一个需求,产品需求、业务逻辑的不同,表单验证的方式方法也有所区别。而最重要的是我们要清楚,表单验证的核心原则是——错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体验。
基于以上原则,个人总结出表单验证的通用方法论:
为了使开发思路更加清晰,我将表单验证的过程分为两步:第一步,用户输入完验证当前输入的有效性;第二步,表单提交时验证整个表单。考虑如下布局:
一个较为通用的JS验证版本如下:
(function (window, $, undefined) { /** * @param {String} $el 表单元素 * @param {[Array]} rules 自定义验证规则 * @param {[Boolean]} isCheckAll 表单提交前全文验证 * @param {[Function]} callback 全部验证成功后的回调 * rules 支持四个字段:name, rule, message, equalTo */ function Validator($el, rules, isCheckAll, callback) { var required = 'required'; var params = Array.prototype.slice.call(arguments); this.$el = $el; this._rules = [ {// 用户名 username: required, rule: /^[\u4e00-\u9fa5\w]{6,12}$/, message: '不能包含敏感字符' }, {// 密码 password: required, rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/, message: '只支持数字字母下划线,且不为纯数字或字母' }, {// 重复密码 password2: required, rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/, message: '只支持数字字母下划线,且不为纯数字或字母', equalTo: 'password' }, {// 手机 mobile: required, rule: /^1[34578]\d{9}$/, message: '请输入有效的手机号码' }, {// 验证码 code : required, rule: /^\d{6}$/, message: '请输入6位数字验证码' }, {// 邮箱 email : required, rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱' } ]; this.isCheckAll = false; this.callback = callback; // 合并参数 this._rules = this._rules.concat(params[1]); if(params[2]) { if(typeof params[2] == 'function') { this.callback = params[2]; }else {// 提交表单时是否开启全部验证 this.isCheckAll = params[2]; } } // 用于存储合去重后的参数 this.rules = []; } Validator.prototype._getKey = function (obj) { var k = ''; for(var key in obj) { if(obj.hasOwnProperty(key)) { if( key !== 'rule' && key !== 'message' && key !== 'equalTo') { k = key; } } } return k; }; /** * 数组对象重复数据进行合并,后面的覆盖前面的 */ Validator.prototype.filterRules = function (arrObj) { var _this = this, h = {}, res = [], arrObject = this._rules; $.each(arrObject, function (i, item) { var k = _this._getKey(item); try { if(!h[k] && h[k] !== 0) { h[k] = i; res.push(item); }else { res[h[k]] = $.extend(res[h[k]], item); } }catch(e) { throw new Error('不是必填') } }); this.rules = res; }; Validator.prototype.check = function () { var _this = this; $.each(_this.rules, function (i, item) { var key = _this._getKey(item), reg = item.rule, equalTo = item.equalTo, errMsg = item.message; _this.$el.find('[name='+key+']') .on('blur', function () { var $this = $(this), errorMsg = '', val = $this.val(), ranges = reg.toString().match(/(\d*,\d*)/), range = '', min = 0, max = 0, placeholderTxt = $(this).attr("placeholder") ? $(this).attr("placeholder") : '信息'; // 定义错误提示信息 if(val && val != 'undefined') { // 值不为空 if(ranges) { // 边界限定 range = ranges[0]; min = range.split(',')[0] ? range.split(',')[0].trim() : 0; max = range.split(',')[1] ? range.split(',')[1].trim() : 0; if(val.length < min || val.length > max) { // 处理边界限定的情况 if(min && max) { errorMsg = '请输入'+min+'-'+max+'位'+placeholderTxt+''; }else if(min) { errorMsg = '最少输入'+min+'位'+placeholderTxt+''; }else if(max) { errorMsg = '最多输入'+max+'位'+placeholderTxt+''; } }else { // 边界正确但匹配错误 errorMsg = ''+errMsg+''; } }else { // 没有边界限定 errorMsg = ''+errMsg+''; } if(equalTo) { var equalToVal = _this.$el.find('[name='+equalTo+']').val(); if(val !== equalToVal) { errorMsg = '两次输入不一致,请重新输入'; } } } else { // 值为空 errorMsg = '请输入'+placeholderTxt+'' } if($('.error-msg').length > 0) return; // 验证输入,显示提示信息 if(!reg.test(val) || (equalTo && val !== equalToVal)) { if($this.siblings('.error-msg').length == 0) { $this.after(errorMsg) .siblings('.error-msg') .hide() .fadeIn(); } }else { $this.siblings('.error-msg').remove(); } }) .on('focus', function () { $(this).siblings('.error-msg').remove(); }) }); }; Validator.prototype.checkAll = function () { var _this = this; if(_this.isCheckAll) { _this.$el.find('[type=submit]') .click(function () { _this.$el.find('[name]').trigger('blur'); if($('.error-msg').length > 0) { console.log('有错误信息'); return false; }else { console.log('提交成功'); _this.callback(); } }); return false; } }; Validator.prototype.init = function () { this.filterRules(); this.check(); this.checkAll(); }; $.fn.validator = function (rules, isCheckAll, callback) { var validate = new Validator(this, rules, isCheckAll, callback); return validate.init(); }; })(window, jQuery, undefined);
你可以这样使用:
var rules = [ {// 用户名 username: 'required', rule: /^[\u4e00-\u9fa5\d]{6,12}$/, message: '只支持数字loo2222' }, {// 密码 password: 'required', rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/, message: 'mimmimmia' }, {// 重复密码 password2: 'required', rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/, message: '只支持数字字母下划线,不能为纯数字或字母2222', equalTo: 'password' }, {// 座机 telephone : 'required', rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的座机' } ]; $('form').validator(rules, true)
看完上述内容,是不是对jQuery如何实现高度灵活的表单验证功能有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。