form送出表單_Form表單submit送出時的非空判斷

概要

使用Form表單送出資訊時，可能我們需要對輸入的資訊進行判斷，如果沒有輸入内容或者全部輸入空格則不能進行送出，進而達到簡單的資訊過濾，這裡使用的是JS來進行判斷。

執行個體代碼：

# Form表單
<form class="form-horizontal" role="form" action="/add_friend_url/" method="post" onsubmit="return check()" target='nm_iframe'>
                        <input type='hidden' name='csrfmiddlewaretoken' value='dXyLQpLGvGFdy2i5lr2T8Zt8Fuq9iGLmukVryRZjx9jsOQE48YuVbDpdfFN8idAh' />
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">名稱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id='web_name' name="name" placeholder="請輸入網站名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="url" class="col-sm-2 control-label">連結</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id='web_url' name="url" placeholder="請輸入URL">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description" class="col-sm-2 control-label">描述</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id='web_describe' name="description" placeholder="請輸入部落格描述（選填）">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">郵箱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id='web_email' name="email" placeholder="請輸入郵箱用于接收通知">
                            </div>
                        </div>
                <div class="col-xs-12 col-md-12 col-lg-12">
                    <div class="modal-footer">
                        <input type='submit' class='btn btn-primary center-block b-s-submit' value='送出'>
                        </div>
                        </div>

</form>
                    
<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>

# JS代碼
<script type="text/javascript">

　　function check(){
　　var web_name = $("#web_name").val().replace(/s+/g,"");　　
　　var web_url = $("#web_url").val().replace(/s+/g,"");　　
　　var web_email = $("#web_email").val().replace(/s+/g,"");　　

　　if(web_name == null || web_name == ""){
　　　　alert("網站名稱不能為空");
　　　　return false;

　　}
    else if(web_url == null || web_url == ""){
        alert("網站連結不能為空");
        return false;
    }
    else if(web_email == null || web_email == ""){
        alert("聯系郵箱不能為空")
        return false;
    }
        alert("申請已送出，等待站長稽核通過")
        
        $('#b-modal-site').modal('hide')
　　　　return true;

　　}

</script>
           

其中

<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>

是禁止submit送出内容後跳轉，

var web_name = $("#web_name").val().replace(/s+/g,"");

是根據标簽id得到其中的内容，并且使用replace去掉其中的空格，

alert("網站名稱不能為空");

alert是彈出提示框，

$('#b-modal-site').modal('hide')

當submit送出資訊後隐藏模态框。

最終效果：