快捷導(dǎo)航

學(xué)習(xí)LayUI時自研的表單參數(shù)校驗(yàn)框架案例分析

更新時間：2019年07月29日 09:14:57 作者：16軟件工程一班陳福星

本框架基于LayUI框架寫的表單參數(shù)校驗(yàn)框架，本文分過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧

開發(fā)背景&痛點(diǎn) ：

每次寫前端的表單的時候需要對表單里用戶填寫的內(nèi)容進(jìn)行校驗(yàn)，減少服務(wù)器壓力，提前對已知錯誤對用戶提示。每次會要寫很多的if else等等對輸入框中的內(nèi)容進(jìn)行判斷，并對為空、格式不正確等情況作出對應(yīng)提示。

需要寫大量重復(fù)的if else語句，實(shí)在太麻煩，所以自己寫了這個框架用于前端參數(shù)的校驗(yàn)。

本框架基于LayUI框架

對于三種開發(fā)者情況：

1、完全不會LayUI也沒有任何關(guān)系在html頭部中添加如下代碼就OK了

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<link rel="stylesheet" >
<script>
  var layer=layui.layer;
  var form=layui.form;
  layui.use(['layer','form'],function () {})
</script>

2、使用了LayUI框架進(jìn)行開發(fā)則無需做改變

3、使用了其他前端UI框架將源碼中下面語句轉(zhuǎn)換成你的UI框架的提示框即可。

layer.tips(tipname+'不合法('+tiplegal+')',chooser,{
        tips: [2, '#FF0000']
      })

使用本參數(shù)校驗(yàn)框架需要引入一個js文件（可以下載到本地使用）

在Html頭部插入如下代碼引入JS

<script src="https://mywarehouse.oss-cn-shenzhen.aliyuncs.com/ParaCheck.js"></script>

使用案例

HTML：

本注冊頁面對應(yīng)JS文件

使用效果

直接點(diǎn)擊注冊

輸入1后點(diǎn)擊注冊

API:

核心接口：

1：paraCheck(chooser,name,regex,legal)//單個輸入框檢查函數(shù)，傳入的三個參數(shù)為，選擇器（#id或者.class）、輸入框名稱（中文意義，比如手機(jī)號碼）、正則匹配式(比如驗(yàn)證碼輸入框?qū)?yīng)的正則表達(dá)式為/^[0-9]{6}$/)

2：multiParaCheck(choosers,names,regexs,legals)//批量校驗(yàn)函數(shù)

返回值：

1：true 全部通過校驗(yàn)

2：false 出現(xiàn)未通過校驗(yàn)的輸入框，實(shí)時進(jìn)行如上圖對用戶進(jìn)行提示

備注：第一個參數(shù)必填，第二、三、四個參數(shù)選填，建議都傳入，用戶體驗(yàn)感好，如果您不想麻煩，只檢測是否是空的，那只需要傳入第一個參數(shù)。

圖中注冊界面腳本代碼：

（注冊按鈕onclick="register()"）

function register() {
  var choosers=['#phone','#content','#password','#name','#stuId','#gender','#grade','#major','#classNumber'];
  var names=['手機(jī)號碼','短信驗(yàn)證碼','密碼','姓名','學(xué)號','性別','年級','專業(yè)','班級'];
  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位數(shù)字','6位數(shù)字','8-20位數(shù)字、字母','2-5位中文','12位數(shù)字','男|女','4位數(shù)字','2-10位中文','1-2位數(shù)字'];
  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');
      }
    });
  }
}

總結(jié)

以上所述是小編給大家介紹的學(xué)習(xí)LayUI時自研的表單參數(shù)校驗(yàn)框架案例分析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: