学习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 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
jquery滚动特效集锦
Jun 03 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
微信小程序带动画弹窗组件使用方法详解
Nov 27 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脚本的10个技巧(5)
2006/10/09 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php表单提交实例讲解
2015/11/12 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python删除某个字符
2018/03/19 Python
python实现括号匹配的思路详解
2018/08/23 Python
python实现祝福弹窗效果
2019/04/07 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
使用Tkinter制作信息提示框
2020/02/18 Python
django model通过字典更新数据实例
2020/04/01 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
最新自我评价范文
2013/11/16 职场文书
结婚喜宴主持词
2014/03/14 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
小学生交通安全寄语
2015/02/27 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
python处理json数据文件
2022/04/11 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL