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提交信息后隐藏模态框。

最终效果：