Form parameter validation framework of self-study learning LayUI

Development Background & sore point : each write to form the front end of the time required for users to fill out a form in the content check, reduce server stress, in advance of known errors to the user prompts. Each will write a lot of if else, and so on to judge the contents of the input box, and is empty, incorrect formatting, and so make the corresponding prompt. Need to write a large number of duplicate if else statements, too much trouble, so he wrote a check for the front-end framework parameters.

This framework is based on frame LayUI

For the three developers circumstances:

1, will not LayUI not have any relationship add the following code in html head on 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, using the LayUI framework for development is no need to make a change

3, the use of other front-end UI framework converts the source code into the prompt box below statement to your UI framework.

layer.tips (tipname + 'invalid (' + tiplegal + ')', Chooser, { 
                Tips: [2, '# FF0000'] 
            })

 

This parameter is necessary to introduce a validation framework js file (you may be downloaded to the local use)

In the following code introduced into the head insertion Html JS

<script src="https://mywarehouse.oss-cn-shenzhen.aliyuncs.com/ParaCheck.js"></script>

　　Use Cases

HTML：

This corresponds to the registration page JS file

Effect

Click on Registration

Enter after 1 Click to register

API:

　　Core interface:

　　　　1: paraCheck (chooser, name, regex, legal) // a single input box check function, passing three parameters, selector (#id or .class), input box name (Chinese meaning, such as phone number), regular matching of formula (n, such as block codes corresponding to the input expression is a / ^ [0-9] {6} $ /)

　　　　2: multiParaCheck (choosers, names, regexs, legals) // check function Batch

　　　　return value:

　　　　　　1: true by checking all

　　　　　　2: false unutilized input box by checking, in real time as the user is prompted to FIG.

　　　　Note: The first parameter required, second, third, four optional parameters, proposals have passed, good user experience a sense, if you do not want trouble, only detects is empty, it would only need to pass first parameter.

The figure registered interface script code:
(Register button 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');
            }
        });
    }
}

声明：

 本文章属于作者原创、仅供学习使用，未经许可不得用于商业用途。