5、django前端页面提示不能为空(js写法)

想要这样的效果：不输入内容，点击提交，弹出提示框：不能为空

 js写法：

 

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'css/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/css1/dsb.css' %}">
</head>
<style type="text/css">
     body {
       padding-top: 10px;
     }
    .main {
       margin-left: 20px;
    }

</style>
<body>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">json对比</h2>
    <form id = "aaa" method="post" action="/json_compare_def/" >
        <div class="table-responsive">

            A:
            <textarea id="content_valuea" rows="10" cols="56" name="a_json" ></textarea>


            B:
            <textarea id="output_valueb" rows="10" cols="56" name="b_json" ></textarea>

            <br>
            <br>
            <button class="btn btn-primary btn-sm">submit</button>
            <br>
            <br>
            <a style="color:black;font-weight:700 ">对比结果：</a>
            <br>
            <br>
            <div>{{ result }}</div>

        </div>
    </form>
</div>

</body>
<script type="text/javascript">
        var text_value1 = document.getElementById('aaa');
        text_value1.addEventListener("submit",function(e){
            var text_value = document.getElementById('content_valuea').value;
            var text_value3 = document.getElementById('output_valueb').value;
            if (text_value == "" || text_value3 == "") {
                alert("不能为空");
                e.preventDefault();
            }
        },false);
</script>
</html>
posted @ 2021-09-17 10:38  东北小酱  阅读(433)  评论(0)    收藏  举报