前言
前端表單校驗是過濾無效數據、假數據、有毒數據的第一步，是數據安全的第一道關卡，雖然我們不能100%相信客戶端提交的數據（真正的校驗還得在服務端進行），但設置前端表單校驗也是至關重要的，自己寫邏輯代碼一個一個表單字段去校驗不現實，又不想自己造輪子，使用jquery插件是不錯的選擇，這里記錄一下在項目中使用到的nice-validator表單驗證插件的簡單使用
nice-validator，簡單、智能、令人愉悅的表單驗證方案，使用簡單、配置項豐富、自由度高，對開發者友好，更多介紹請看官網：https://validator.niceue.com/
代碼編寫
我們在IM系統的登錄、注冊表單作為例子，測試使用nice-validator進行表單校驗
點擊下載（https://github.com/niceue/nice-validator/releases/tag/1.1.4）下載nice-validator-1.1.4.zip，下載下來后只留下有關鍵文件即可，其他的都刪掉，然后在公用頭部head.html引入
使用方法
nice-validator有兩種使用方式：
(1)、DOM 綁定規則，無需 JS 代碼，參考：https://validator.niceue.com/docs/dom-bindings.html，一般使用第二種，在js配置規則
(2)、JS 配置規則，無侵入 DOM
//提交登錄 function login() { $("#loginForm").validator({ rules: {//定制規則 }, fields: {//配置規則 userName:'required;', password:'required;' }, messages: {//定制校驗失敗提示 }, valid: function () {//驗證通過，回調 $.post(ctx + "/imsUser/login", $("#loginForm").serializeObject(), function (data) { if (data.flag) { window.location.href = ctx + "/imsUser/socketChart/" + data.data.userName + ".html" } else { // tip提示 tip.msg(data.msg); } }); } }).trigger("validate"); }
內置規則
插件內置 8 個規則：
- required - 使字段必填
- checked - 必選，還可以控制選擇項目的數量
- match - 當前字段與另一個字段比較
- remote - 獲取服務器端驗證的結果
- integer - 只能填寫整數
- range - 只能填寫指定范圍的數
- length - 字段值必須符合指定長度
- filter - 過濾當前字段的值，不做驗證
自定義規則如果與內置規則同名，則自定義規則優先
自定義規則
$("#myForm").validator({
rules: {//定制規則
一、直接使用正則，適用於使用單個正則能搞定的驗證
// 1、使用數組包裹正則和錯誤消息，規則不通過時提示該消息
mobile: [/^1[3458]\d{9}$/, '請檢查手機號格式'],
// 2、或者，直接定義正則，需要另外定義錯誤消息（寫在下方的messages參數里），否則提示默認消息
mobile: /^1[3458]\d{9}$/
二、使用函數，函數方式具有最大的靈活性，搞定任何驗證。不同返回值，導致不同驗證結果：
// 1、使用內置的 .test() 方法檢測是否符合某個規則，如果通過返回true，否則返回錯誤消息
mobile: function(element, params) {
return /^1[3458]\d{9}$/.test(element.value) || '請檢查手機號格式';
}
// 2、自定義 ajax 驗證
// 你只需要將 $.ajax 返回，並且保證 response 符合上面的返回值說明，其他的插件都會自動處理。
// 當然，你也可以加上 success 回調做點別的，或者自己加上自定義 header
mobile: function(element){
return $.ajax({
url: 'check/username.php',
type: 'post',
data: element.name +'='+ element.value,
dataType: 'json'
});
}
更多方式請參閱 自定義規則之函數：https://validator.niceue.com/docs/custom-rules.html
},
fields: {//配置規則（使用規則）
phone:'required;mobile',
username:'required;'
},
messages: {//定制校驗失敗提示
mobile:'請檢查手機號格式'
},
valid: function () {//驗證通過的回調
}
}).trigger("validate");
自定義主題
自帶的規則比較少，樣式比較丑，好在在我們引入的語言文件里面（zh-CN.js）定義了部分規則，已經部分主題
有幾種主題（效果請戳：）：https://validator.niceue.com/releases/1.1.4/demo/option-theme.html，我們使用yellow_right_effect，有個動畫效果，比較好看
但放到我們項目時發現超出div框的部分被遮擋
因此我們參考zh-CN.js，在head.html聲明一個自定義主題，並進行全局配置
<!-- nice validator--> <script> //聲明一個自定義主題 $.validator.setTheme({ 'hz-theme': { formClass: 'n-yellow', msgClass: 'n-bottom', msgArrow: '<span class="n-arrow"><b>◆</b><i>◆</i></span>', msgShow: function ($msgbox, type) { var $el = $msgbox.children(); if ($el.is(':animated')) return; if (type === 'error') { if ($el.parents('.input-group').length) { $el.parent().css({position: 'initial'}); } $el.css({left: '20px', opacity: 0}).addClass('keep-front') .delay(100).show().stop() .animate({left: '-4px', opacity: 1}, 150) .animate({left: '3px'}, 80) .animate({left: '0px'}, 80); } else { $el.css({left: 0, opacity: 1}).fadeIn(200); } }, msgHide: function ($msgbox, type) { var $el = $msgbox.children(); $el.stop().delay(100).show() .animate({left: '20px', opacity: 0}, 300, function () { $msgbox.hide(); }); } } }); //全局配置 $.validator.config({ timely: 2,//觸發時機 theme: 'hz-theme',//使用自定義主題 rules: {//定制規則 //郵箱格式 email: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, //限制輸入整數 integer: function (element, params) { //刪除非整數字符 element.value = element.value.replace(/[^0-9]/g, ''); //默認規則 var re, z = '0|', p = '[1-9]\\d*', key = params ? params[0] : '*'; switch (key) { case '+': re = p; break; case '-': re = '-' + p; break; case '+0': re = z + p; break; case '-0': re = z + '-' + p; break; default: re = z + '-?' + p; } re = '^(?:' + re + ')$'; return new RegExp(re).test(this.value) || (this.messages.integer && this.messages.integer[key]); } } }); </script>
規則作用范圍
(1). 全局
使用 $.validator.config()，建議配置在 local 配置文件（如：zh-CN.js）中，任何實例，任何字段都能訪問到該規則
$.validator.config( rules: { mobile: [/^1[3-9]\d{9}$/, "請填寫有效的手機號"], chinese: [/^[\u0391-\uFFE5]+$/, "請填寫中文字符"] } );
(2). 當前實例
在調用初始化驗證的時候傳參，只對調用時的實例有效
$("#myForm").validator(
rules: {
mobile: [/^1[3-9]\d{9}$/, "請填寫有效的手機號"],
chinese: [/^[\u0391-\uFFE5]+$/, "請填寫中文字符"]
}
);
(3). 當前字段
只能通過 DOM 方式在表單元素上定義
<input name="demo" data-rule="required;xxx" data-rule-xxx="[/^\d{6}$/, '請輸入6位數字']">
效果演示
登錄表單
登錄校驗簡單一點，就一個非空校驗就OK了
//提交登錄 function login() { $("#loginForm").validator({ rules: {//定制規則 }, fields: {//配置規則（使用規則） userName: 'required;', password: 'required;' }, messages: {//定制校驗失敗提示 }, valid: function () {//驗證通過，回調 $.post(ctx + "/imsUser/login", $("#loginForm").serializeObject(), function (data) { if (data.flag) { window.location.href = ctx + "/imsUser/socketChart/" + data.data.userName + ".html" } else { // tip提示 tip.msg(data.msg); } }); } }).trigger("validate"); }
效果
注冊表單
注冊的時候判斷賬號是否已經存在，我們之前是這樣做的
現在做如下修改，先在controller新增一個查詢接口，去掉保存方法里面的校驗
修改js代碼
//提交注冊 function register() { $("#registerForm").validator({ rules: {//定制規則 reusername: function (element) { return _ajax({ url: ctx + '/imsUser/reusername', type: 'post', data: element.name +'='+ element.value, dataType: 'json' }); } }, fields: {//配置規則（使用規則） userName: 'required;reusername', password: 'required', nickName: 'required', email: 'required;email', phone: 'required;mobile', }, messages: {//定制校驗失敗提示 reusername:"賬號已存在！！！" }, valid: function () {//驗證通過，回調 let newTime = commonUtil.getNowTime(); $("#createdTime").val(newTime); $("#updataTime").val(newTime); $("#avatar").val("/image/logo.png"); $.post(ctx + "/imsUser/save", $("#registerForm").serializeObject(), function (data) { if (data.flag) { switchover(); } // tip提示 tip.msg(data.msg); }); } }).trigger("validate"); }
效果
后記
文章到這里結束，更多nice validator校驗插件的參數配置、方法、事件等介紹請具體查閱官方文檔：https://validator.niceue.com/docs/