学习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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
JsChart组件使用详解
Mar 04 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
QML实现圆环颜色选择器
Sep 25 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
原生js实现下拉框选择组件
Jan 20 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
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python程序暂停的正常处理方法
2019/11/07 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
大学生实习鉴定评语
2014/04/25 职场文书
学校就业推荐信范文
2014/05/19 职场文书
企业宣传工作方案
2014/06/02 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
大学生受助感言
2015/08/01 职场文书