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

时间:2021-05-18

开发背景&痛点 :

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

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

本框架基于LayUI框架

对于三种开发者情况:

1、完全不会LayUI也没有任何关系 在html头部中添加如下代码就OK了

<script src="https:///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'); } }); }}

总结

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章