学习LayUI时自行开发表单参数验证框架的案例分析

发展背景痛点：

每次写前端表单，都需要验证表单中用户填写的内容，以减轻服务器的压力，提前提示用户已知错误。每次都需要写大量的if else等来判断输入框的内容，对于空白和格式不正确的给出相应的提示。

写大量重复的if else语句太麻烦了，所以我写了这个框架来检查前端参数。

该框架基于LayUI框架

对于三种开发人员情况：

1.一点都不拉雷辉也没关系。可以在html标题中添加以下代码

script src=' http :https://www . layuicdn.com/layui/layui . js '/script link rel='样式表' href=' https://www . layuicdn.com/layui/CSS/layui . CSS ' script var layer=layui . layer；var form=layui.form腊月。使用(['layer '，' form']，function () {})/script 2。如果使用Layui框架进行开发，则没有必要对其进行更改

3.使用其他前端UI框架将源代码中的以下语句转换为UI框架的提示框。

Layer.tips(tipname '非法(' tip legal ')'，chooser，{tips : [2，' # ff0000']})使用这个参数验证框架时，需要引入一个js文件(可以本地下载使用)

将下面的代码插入到Html标题中，引入JS

脚本src=' http :https://my warehouse . OSS-cn-Shenzhen . aliyuncs.com/paracheck . js '/脚本用例

HTML:

该注册页面对应于JS文件

使用效果

直接点击注册

输入1，然后单击注册

API:

核心接口：

1: paracheck (chooser，name，regex，legal)//单输入框检查功能。传入的三个参数是选择器(#id或)。类)、输入框名称(中文意思，如手机号)和正则匹配公式(例如验证码输入框对应的正则表达式为/[0-9] {6} $/)

2:多批次检查(选择者、名称、正则表达式、合法)//批次检查功能

返回值：

1:真全部通过验证

2: false出现验证失败的输入框，实时提示用户如上图

备注：第一个参数为必填项，第二、三、四个参数为可选项。建议所有参数都传进去，用户体验好。如果不想麻烦，只需要传入第一个参数。

图中注册界面脚本代码：

(注册按钮onclick='register()')

function register(){ var chooser=[' # phone '，' #content '，' #password '，' #name '，' #stuId '，' #gender '，' #grade '，' #major '，' # class number ']；var name=['手机号'，'短信验证码'，'密码'，'姓名'，'学号'，'性别'，'年级'，'专业'，'班级']；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}$/,/^[\ u4e 00-\ u9 fa 5]{ 2，5} $/，/2 [0-9] {11} $/，/[男性和女性] $/，/20 [0-9] {2} $/，/[\ U4E00-\。Varlegal=['11位数字'，' 6位数字'，' 8-20位数字，字母'，' 2-5位中文数字'，' 12位数字'，'男|女'，' 4位数字'，' 2-10位中文数字'，' 1-2位数字']；if(Multipracheck(选项、名称、正则表达式、法律术语)){ if ($('#password ')。val()！=$ ('# repeatpassword ')。val ()) {layer.tips('两个密码输入不一致'，' # repeatpassword '，{tips : [2，' # ff 0000 ']})；返回；} var formData=new formData()；for(var I=0；长；i ) formData.append(选择者[i]。替换(' # '，'')，$(选择符[i])。val())；$.ajax({ type: 'get '、url: '/fpa/member/login '、xhrfieldds : { with credentials : true }、data: formData、dataType: 'text '、success : function(data){ layer . alert(data)；if(data . indexof(' success ')-1)window . href . open('/log in . html ')；} });}}摘要

以上是边肖在研究拉仪时介绍的自行开发的形态参数标定框架的案例研究。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！