提交表单时input字段非空验证-CSDN博客

本文介绍了一个使用jQuery进行表单验证的实例，确保在提交前所有必填字段已填写，未完成时将弹出提示并阻止提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求，当提交表单的时候，如果要验证的字段为空，则弹出提示框提示请完善表单信息，并且 return;不执行下一步。

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="form-group">
            <label>名称 <em style="color: red;">*</em></label>
            <div class="">
                <input type="text" class="form-control" id="signName" maxlength="16"></input>
            </div>
        </div>
        <div class="form-group">
            <label>开始时间 <em style="color: red;">*</em></label>
            <div>
                <input type="text" class="form-control" id="beginTime" value="9:00" name="1"></input>
            </div>
        </div>
        <div class="form-group">
            <label>结束时间 <em style="color: red;">*</em></label>
            <div>
                <input type="text" class="form-control" id="endTime" value="17:30" name="1"></input>
            </div>
        </div>
        <div class="form-group">
            <label>周期选择 <em style="color: red;">*</em></label>
            <div class="col-md-9  col-sm-9 col-xs-9">
                <label><input name="circle" type="checkbox" value="2" checked='checked'/>周一</label>
                <label><input name="circle" type="checkbox" value="3" checked='checked'/>周二</label>
                <label><input name="circle" type="checkbox" value="4" checked='checked'/>周三</label>
                <label><input name="circle" type="checkbox" value="5" checked='checked'/>周四</label>
                <label><input name="circle" type="checkbox" value="6" checked='checked'/>周五</label>
                <label><input name="circle" type="checkbox" value="7" checked='checked'/>周六</label>
                <label><input name="circle" type="checkbox" value="1" checked='checked'/>周日</label>
            </div>
        </div>
        <button type="button" class="btn blue" id="addBtn">保存</button>
        <!-- 弹框 -->
        <script src="https://cdn.bootcss.com/layer/2.2/layer.js"></script>
        <script src="https://cdn.bootcss.com/layer/2.2/extend/layer.ext.js"></script>
        <script type="text/javascript">
            $("#addBtn").on("click", function() {
                //验证字段
                if(validate()) {
                    layer.msg('请完善表单信息', { icon: 5, time: 1000 });
                    return;
                }
                //验证
                function validate() {
                    if($("#signName").val() == '') {
                        return true;
                    }
                    if($("#beginTime").val() == '') {
                        return true;
                    }
                    if($("#endTime").val() == '') {
                        return true;
                    }
                    if(getCircle() == '') {
                        return true;
                    }
                    return false;
                }
            })
        </script>
    </body>
</html>