学习LayUI时自研的表单参数校验框架案例分析


Posted in Javascript onJuly 29, 2019

开发背景&痛点 :

每次写前端的表单的时候需要对表单里用户填写的内容进行校验,减少服务器压力,提前对已知错误对用户提示。每次会要写很多的if else等等对输入框中的内容进行判断,并对为空、格式不正确等情况作出对应提示。

需要写大量重复的if else语句,实在太麻烦,所以自己写了这个框架用于前端参数的校验。

本框架基于LayUI框架

对于三种开发者情况:

1、完全不会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>

2、使用了LayUI框架进行开发则无需做改变

3、使用了其他前端UI框架将源码中下面语句转换成你的UI框架的提示框即可。

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

使用本参数校验框架需要引入一个js文件(可以下载到本地使用)

在Html头部插入如下代码引入JS

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

使用案例

HTML:

学习LayUI时自研的表单参数校验框架案例分析

本注册页面对应JS文件

学习LayUI时自研的表单参数校验框架案例分析

使用效果

直接点击注册

学习LayUI时自研的表单参数校验框架案例分析

输入1后点击注册

学习LayUI时自研的表单参数校验框架案例分析

API:

核心接口:

1:paraCheck(chooser,name,regex,legal)//单个输入框检查函数,传入的三个参数为,选择器(#id或者.class)、输入框名称(中文意义,比如手机号码)、正则匹配式(比如验证码输入框对应的正则表达式为/^[0-9]{6}$/)

2:multiParaCheck(choosers,names,regexs,legals)//批量校验函数

返回值:

1:true  全部通过校验

2:false 出现未通过校验的输入框,实时进行如上图对用户进行提示

备注:第一个参数必填,第二、三、四个参数选填,建议都传入,用户体验感好,如果您不想麻烦,只检测是否是空的,那只需要传入第一个参数。

图中注册界面脚本代码:

(注册按钮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');
      }
    });
  }
}

总结

以上所述是小编给大家介绍的学习LayUI时自研的表单参数校验框架案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
jquery.pager.js分页实现详解
Jul 29 #jQuery
javascript面向对象创建对象的方式小结
Jul 29 #Javascript
jquery.pager.js实现分页效果
Jul 29 #jQuery
vue-router跳转时打开新页面的两种方法
Jul 29 #Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 #Javascript
微信小程序文字显示换行问题
Jul 28 #Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 #Javascript
You might like
模仿OSO的论坛(三)
2006/10/09 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
Smarty保留变量用法分析
2016/05/23 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
详解a++和++a的区别
2017/08/30 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
Vue中key的作用示例代码详解
2020/06/10 Javascript
Python封装shell命令实例分析
2015/05/05 Python
浅谈Python的list中的选取范围
2018/11/12 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
python sleep和wait对比总结
2021/02/03 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
关于打架的检讨书
2014/01/17 职场文书
超市采购员岗位职责
2014/02/01 职场文书
安全目标责任书
2014/07/22 职场文书