bootstrap：表單必填項*標識，及提交前校驗

1、引入bootstrap和validate

<script src="{% static 'js/jquery.min.js' %}"></script>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">

{# 前端校驗validate   #}
<script src="{% static 'js/jquery.validate-1.14.0.js' %}"></script>
<script src="{% static 'js/jquery-validation-1.14.0-localization-messages_zh.js' %}"></script>

 

2、修改bootstrap.css文件，增加如下樣式描述，主要是給表單前增加紅色星號*,和必填提示樣式

/*必填項前加紅色星號*/
.form-group.required .control-label:before {
    color: red;
    content: "*";
    position: absolute;
    margin-left: -15px;
}
/************jQuery.Validate插件樣式開始********************/
label.error {
  color: Red;
  padding-left: 0px;
}
input.error {
  border: dashed 1px red;
}
select.error {
  border: dashed 1px red;
}
textarea.error {
  border: dashed 1px red;
}

3、給表單加上required屬性

{# 新增模態框body #}
<form id="add-project">
    <div class="modal-body" style="height: 100%;">
        {# 給class屬性增加 required #}
        <div class="form-group required">
            <label for="firstname" class="col-sm-3 control-label">IP</label>
            <div class="col-sm-7">
                {# 增加 required 屬性,也可以在下方規則出添加 #}
                <input type="text" class="form-control" id="server_ip" name="server_ip" required
                       placeholder="請輸入ip">
            </div>
        </div>

        <div class="form-group required">
            <label for="firstname" class="col-sm-3 control-label">子系統名稱</label>
            <div class="col-sm-7">
                <select data-placeholder="選擇子系統..." class="form-control" name="sub_sys"
                        id="sub_sys" required="required">
                </select>
            </div>
        </div>
    </div>
</form>

 

4、編寫form表單必填項校驗規則

<script type="text/javascript">
    {# 對id="add-project"的表單設置校驗規則 #}
    $("#add-project").validate({
        {# 校驗規則 #}
        rules: {
            {# 給name屬性為server_ip的標簽設置規則 #}
            server_ip: {
                required: true, // 設為必填項
                {# 正則表達式校驗ip格式 #}
                ip_validate: true  // 增加實時輸入校驗
            },
            sub_sys: {
                required: true,
                digits: true
            },
        },
        messages: {
            server_ip: "請輸入合法的IP",
            sub_sys: "請輸入正整數"
        },

        submitHandler: function (form) {
            $(form).ajaxSubmit();
        },

    });
    {# 增加自定義的ip校驗 #}
    $.validator.addMethod("ip_validate", function (value, element) {
        let ip_validate = /^((\d)|([1-9]\d)|(1\d{2})|((2[0-4]\d)|(25[0-5])))(\.((\d)|([1-9]\d)|(1\d{2})|((2[0-4]\d)|(25[0-5])))){3}$/;
        return this.optional(element) || (ip_validate.test(value));
    }, "請輸入合法的IP");
</script>

5、提交表單前校驗，校驗不通過不請求接口

function add_project() {
    // 先校驗表單在前端是否校驗通過
    let flag = $("#add-project").valid();
    if (!flag) {
        //沒有通過驗證，就不進行下面的ajax提交了
        return;
    }
    {#ajax請求接口#}
    $.ajax({

    })
}

6、提示效果

直接提交時提示如下：

 

 輸入不合法數據時提示：