良心表单提交前验证

image.png

包含对表单，复选框，下拉框，文本框，电话号码的验证常用的也就这几个吧
结构是，在form表单中写“onsubmit="return checked()"”，在要验证的数据项中加class “requireCon”就可以了

image.png

数据项div结构：

image.png

哦对了，电话号码要给该input加一个“tel”的id哦，js中有用到，当然你也可以该js方法里的id名
css：

.requireCon.form-group>label::after{
    content: '*';
    color: red;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 1rem;
}

js方法

function checked(){
    var msgs = '请填写完整表单信息';
    var isSave = true;
    $('.requireCon').each(function(k,v){
        if($(v).find('input').val() == ''|| $(v).find('select').val() == ''|| $(v).find('textarea').val() == ''){
            isSave = false;
            msgs = '请填写'+$(v).find('label').html();
            return false;
        }
        if($(v).find('input[type="checkbox"]') != 0){
            var isChecked = false;
            $(v).find('input[type="checkbox"]').each(function(k1,v1){
                if($(v1).prop("checked")){
                    isChecked = true;
                    return false;
                }else{
                    msgs = '请填写'+$(v).find('label').html();
                    return false;
                }
            });
        }
    });
    var isPhone = (/^1[3|4|5|8][0-9]\d{4,8}$/.test($('#tel').val()));
    if(isSave){
        if(($('#tel').length != 0) && (!isPhone)){
            layer.msg('请填写合法手机号');
            return false;
        }else{
            return true;
        }
    }else{
        layer.msg(msgs);
        return false;
    }
}

image.png

嗯酱就好啦。。有没有很简单！我有没有很大方！我有没有很聪明！