開發背景&痛點:每次寫前端的表單的時候須要對錶單裏用戶填寫的內容進行校驗,減小服務器壓力,提早對已知錯誤對用戶提示。每次會要寫不少的if else等等對輸入框中的內容進行判斷,並對爲空、格式不正確等狀況做出對應提示。須要寫大量重複的if else語句,實在太麻煩,因此本身寫了這個框架用於前端參數的校驗。javascript
本框架基於LayUI框架css
對於三種開發者狀況:html
一、徹底不會LayUI也沒有任何關係在html頭部中添加以下代碼就OK了前端
<script src="https://www.layuicdn.com/layui/layui.js"></script> <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"> <script> var layer=layui.layer; var form=layui.form; layui.use(['layer','form'],function () {}) </script>
二、使用了LayUI框架進行開發則無需作改變java
三、使用了其餘前端UI框架將源碼中下面語句轉換成你的UI框架的提示框便可。ajax
layer.tips(tipname+'不合法('+tiplegal+')',chooser,{ tips: [2, '#FF0000'] })
使用本參數校驗框架須要引入一個js文件(能夠下載到本地使用)正則表達式
在Html頭部插入以下代碼引入JS服務器
<script src="https://mywarehouse.oss-cn-shenzhen.aliyuncs.com/ParaCheck.js"></script>
使用案例app
HTML:框架
本註冊頁面對應JS文件
使用效果
直接點擊註冊
輸入1後點擊註冊
API:
核心接口:
1:paraCheck(chooser,name,regex,legal)//單個輸入框檢查函數,傳入的三個參數爲,選擇器(#id或者.class)、輸入框名稱(中文意義,好比手機號碼)、正則匹配式(好比驗證碼輸入框對應的正則表達式爲/^[0-9]{6}$/)
2:multiParaCheck(choosers,names,regexs,legals)//批量校驗函數
返回值:
1:true 所有經過校驗
2:false 出現未經過校驗的輸入框,實時進行如上圖對用戶進行提示
備註:第一個參數必填,第2、3、四個參數選填,建議都傳入,用戶體驗感好,若是您不想麻煩,只檢測是不是空的,那隻須要傳入第一個參數。
圖中註冊界面腳本代碼:
(註冊按鈕onclick="register()")
function register() { var choosers=['#phone','#content','#password','#name','#stuId','#gender','#grade','#major','#classNumber']; var names=['手機號碼','短信驗證碼','密碼','姓名','學號','性別','年級','專業','班級']; var regexs=[/^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\d{8}$/,/^[0-9]{6}$/,/^[0-9a-zA-Z]{8-20}$/,/^[\u4e00-\u9fa5]{2,5}$/,/^2[0-9]{11}$/,/^[男女]$/,/^20[0-9]{2}$/,/^[\u4e00-\u9fa5]{2,10}$/,/^[0-9]{1,2}$/]; var legals=['11位數字','6位數字','8-20位數字、字母','2-5位中文','12位數字','男|女','4位數字','2-10位中文','1-2位數字']; if(multiParaCheck(choosers,names,regexs,legals)) { if ($('#password').val()!=$('#repeatPassword').val()) { layer.tips('兩次密碼輸入不一致','#repeatPassword',{ tips: [2, '#FF0000'] }); return; } var formData=new FormData(); for(var i=0;i<choosers.length;i++) formData.append(choosers[i].replace('#',''),$(choosers[i]).val()); $.ajax({ type: "get", url: "/fpa/member/login", xhrFields: {withCredentials: true}, data: formData, dataType: "text", success: function (data) { layer.alert(data); if (data.indexOf('成功') > -1) window.href.open('/login.html'); } }); } }
聲明:
本文章屬於做者原創、僅供學習使用,未經許可不得用於商業用途。