学习LayUI时自研的表单参数校验框架
开发背景&痛点:每次写前端的表单的时候需要对表单里用户填写的内容进行校验,减少服务器压力,提前对已知错误对用户提示。每次会要写很多的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:
本注册页面对应JS文件
使用效果
直接点击注册
输入1后点击注册
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'); } }); } }
声明:
本文章属于作者原创、仅供学习使用,未经许可不得用于商业用途。
- 三十九、python学习之Django框架(二):请求、URL路径参数、查询字符串、请求体(表单,非表单)、请求头
- JavaScript框架之AngularJS学习——表单校验
- Layui前台框架表单使用ajax提交
- Spring AOP完成一个简单的参数统一校验框架
- 深度学习DeepLearning.ai系列课程学习总结:13. 超参数调优、Batch正则化理论及深度学习框架学习
- 简易的参数校验框架
- 作业调度框架 Quartz 学习笔记(四) -- 接收参数和维护状态
- ACCP学习旅程之----- 使用HTML语言开发商业站点(第三章 表单和框架)
- AJAX 学习笔记[八] AJAX 制作可自动校验的表单
- Struts2 校验框架学习笔记
- spring boot 基础学习 - 请求参数映射与参数j校验
- 作业调度框架 Quartz 学习笔记(四) -- 接收参数和维护状态
- 一步步学习SPD2010--第九章节--使用可重用工作流和工作流表单(10)--修改初始表单参数
- JavaScript学习——使用JS完成注册页面表单校验
- 框架学习之springMvc整合框架-03数据校验、类型转换
- play_scala框架学习04 表单
- php Laravel框架学习(四) 之 表单与HTML
- Angular学习笔记(二十二)表单处理之校验器
- Springmvc学习笔记(4)之复杂参数类型绑定、校验、数据回显和异常处理
- struts2校验框架,内置参数信息查看