首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >提交表单时input字段非空验证

提交表单时input字段非空验证

作者头像
王小婷
发布2019-08-07 15:26:29
2.8K0
发布2019-08-07 15:26:29
举报
文章被收录于专栏:编程微刊编程微刊

需求,当提交表单的时候,如果要验证的字段为空,则弹出提示框提示请完善表单信息,并且 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>

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.08.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档