逍遥阁

封装一个简单的表单验证功能

关键词: javascript

封装一个简单的表单验证功能

`formValidate.js`

```
function formValidate(layui, form, configList){
    var system = {
        "chinese":/^[\u4e00-\u9fa5]+$/i,
        "username":/^[a-z0-9]{5,16}$/i
    };
    var layer = layui.layer;
    var $ = layui.jquery;
    function checkInput(config){
        if(config['by']=='id'){
            var element = $(config['dom']);
        }
        if(config['method']=='system'){
            var reg = system[config['validate']];
            if(!reg.test(element.val())){
                layer.msg(config['msg']);
                return false;
            }
        }
        return true;
    }
    function checkRadio(config){
        if(config['by']=='name'){
            var elementList = $("[name='@']:checked".replace("@", config['dom']));
        }
        if(elementList.length!=1){
            layer.msg(config['msg']);
            return false;
        }
        return true;
    }
    function checkCheckbox(config){
        if(config['by']=='name'){
            var elementList = $("[name='@']:checked".replace("@", config['dom']));
        }
        var length = elementList.length;
        if(length<config['min'] || length>config['max']){
            layer.msg(config['msg']);
            return false;
        }
        return true;
    }
    $(form).submit(function(){
        for(var i=0;i<configList.length;i++){
            var config = configList[i];
            if(config['status']=='1'){
                if(config['element']=='input'){
                    if(!checkInput(config)){
                        return false;
                    }
                }
                else if(config['element']=='radio'){
                    if(!checkRadio(config)){
                        return false;
                    }
                }
                else if(config['element']=='checkbox'){
                    if(!checkCheckbox(config)){
                        return false;
                    }
                }
            }
        }
        return true;
    });
}
```

使用方法(正在逐步完善)

```
layui.use(['layer', 'jquery'], function(){
    var config = [
        {
            "status": "1",
            "element": "input",
            "by": "id",
            "dom": "#a",
            "msg": "aa",
            "method": "system",
            "validate": "chinese"
        },
        {
            "status": "1",
            "element": "input",
            "by": "id",
            "dom": "#b",
            "msg": "bb",
            "method": "system",
            "validate": "username"
        },
        {
            "status": "1",
            "element": "radio",
            "by": "name",
            "dom": "c",
            "msg": "cc"
        },
        {
            "status": "1",
            "element": "checkbox",
            "by": "name",
            "dom": "d[]",
            "msg": "dd",
            "min": "2",
            "max": "3"
        }
    ];
    formValidate(layui, '#form', config);
});
```

admin
2017-07-04 22:14:03
javascript

文章分类

文章标签

文章归档

友情链接

封装一个简单的表单验证功能