开发背景,痛点:
每次写前端的表单的时候需要对表单里用户填写的内容进行校验,减少服务器压力,提前对已知错误对用户提示。每次会要写很多的如果其他等等对输入框中的内容进行判断,并对为空,格式不正确等情况作出对应提示。
需要写大量重复的如果其他语句,实在太麻烦,所以自己写了这个框架用于前端参数的校验。
对于三种开发者情况:
1,完全不会LayUI也没有任何关系在html头部中添加如下代码就好了
& lt;脚本src=" https://www.layuicdn.com/layui/layui.js "祝辞& lt;/script>
& lt;链接rel="样式表" href=" https://www.layuicdn.com/layui/css/layui.css "比;
& lt; script>
var层=layui.layer;
var=layui.form形式;
layui。使用(“层”、“形式”,function () {})
& lt;/script>
2,使用了LayUI框架进行开发则无需做改变
3,使用了其他前端UI框架将源码中下面语句转换成你的UI框架的提示框即可。
layer.tips (tipname + '不合法(' + tiplegal + ') ',选择器,{
小贴士:[2,' # FF0000 ']
})
使用本参数校验框架需要引入一个js文件(可以下载到本地使用)
在Html头部插入如下代码引入JS
& lt;脚本src=" https://mywarehouse.oss-cn-shenzhen.aliyuncs.com/ParaCheck.js "祝辞& lt;/script>
HTML:
函数注册(){
var选择者=[' #手机”、“#内容”,“#密码”,“#名称”,“# stuId”,“#性别”、“#年级”,“#大”,“# classNumber”);
var名称=['手机号码”、“短信验证码”、“密码”,“姓名”,“学号”,“性别”、“年级”、“专业”、“班级”);
var regex=[/^(([0 - 9] 13日)|(14(5、7、9))|(15((0 - 3)|(5 - 9)))|(166)|(17[0,1,3,5,6,7,8])|([0 - 9]18日)| (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?[' 11位数字”,“6位数字”、“8-20位数字,字母”,“2 - 5位中文”,“12位数字”,“男|女”,“4位数字”,“2 - 10位中文”,“1 - 2位数字”);
如果(multiParaCheck(选择者,名称、正则表达式、法律上))
{
if($(“#密码”).val () !=$ (' # repeatPassword) .val ())
{
layer.tips(“两次密码输入不一致”,“# repeatPassword”{
小贴士:[2,' # FF0000 ']
});
返回;
}
var formData=https://www.yisu.com/zixun/new formData ();
我(var=0; 学习LayUI时自研的表单参数校验框架案例分析
