jQuery實現高度靈活的表單驗證功能示例【無UI】
阿新 • • 發佈:2020-05-01
本文例項講述了jQuery實現高度靈活的表單驗證功能。分享給大家供大家參考,具體如下:
表單驗證是前端開發過程中常見的一個需求,產品需求、業務邏輯的不同,表單驗證的方式方法也有所區別。而最重要的是我們要清楚,表單驗證的核心原則是——錯誤資訊提示準確,並且儘可能少的打擾/干擾使用者的輸入和體驗。
該外掛依賴於jQuery,demo地址:https://github.com/CaptainLiao/zujian/tree/master/validator
基於以上原則,個人總結出表單驗證的通用方法論:
為了使開發思路更加清晰,我將表單驗證的過程分為兩步:第一步,使用者輸入完驗證當前輸入的有效性;第二步,表單提交時驗證整個表單。考慮如下佈局:
<form action=""> <ul> <li><label for="username">使用者名稱</label> <input type="text" name="username" id="username" placeholder="使用者名稱"/></li> <li> <label for="password">密碼</label> <input type="text" name="password" id="password" placeholder="密碼"/> </li> <li> <label for="password">確認密碼</label> <input type="text" name="password2" id="password-confirm" placeholder="確認密碼"/> </li> <li> <label for="phone">手機</label> <input type="text" name="mobile" id="phone"/> </li> <li> <label for="email">郵箱</label> <input type="text" name="email" id="email"/> </li> </ul> <button type="submit" id="submit-btn">提交</button> </form>
一個較為通用的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,且不為純數字或字母',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,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 = '<span class="error-msg">請輸入'+min+'-'+max+'位'+placeholderTxt+'</span>'; }else if(min) { errorMsg = '<span class="error-msg">最少輸入'+min+'位'+placeholderTxt+'</span>'; }else if(max) { errorMsg = '<span class="error-msg">最多輸入'+max+'位'+placeholderTxt+'</span>'; } }else { // 邊界正確但匹配錯誤 errorMsg = '<span class="error-msg">'+errMsg+'</span>'; } }else { // 沒有邊界限定 errorMsg = '<span class="error-msg">'+errMsg+'</span>'; } if(equalTo) { var equalToVal = _this.$el.find('[name='+equalTo+']').val(); if(val !== equalToVal) { errorMsg = '<span class="error-msg">兩次輸入不一致,請重新輸入</span>'; } } } else { // 值為空 errorMsg = '<span class="error-msg">請輸入'+placeholderTxt+'</span>' } 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,callback) { var validate = new Validator(this,callback); return validate.init(); }; })(window,jQuery,undefined);
你可以這樣使用:
var rules = [ {// 使用者名稱 username: 'required',rule: /^[\u4e00-\u9fa5\d]{6,message: '只支援數字loo2222' },{// 密碼 password: 'required',message: 'mimmimmia' },{// 重複密碼 password2: 'required',不能為純數字或字母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)
PS:這裡再為大家提供2款非常方便的正則表示式工具供大家參考使用:
JavaScript正則表示式線上測試工具:
http://tools.jb51.net/regex/javascript
正則表示式線上生成工具:
http://tools.jb51.net/regex/create_reg
更多關於jQuery相關內容可檢視本站專題:《jQuery正則表示式用法總結》、《jQuery字串操作技巧總結》、《jQuery操作xml技巧總結》、《jQuery擴充套件技巧總結》、《jquery選擇器用法總結》及《jQuery常用外掛及用法總結》
希望本文所述對大家jQuery程式設計有所幫助。