bootstrapValidator + Ajax表單驗證

阿新 • • 發佈：2019-02-05

首先，利用bootstrap Validator表單驗證進行表單驗證需要如下CSS和JS.

這些樣式和Js可以百度下載，或者到bootstrap-validator的github上找 https://github.com/1000hz/bootstrap-validator

其次，我們需要嚴格遵守相應的格式

程式碼示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>BootstrapValidator demo</title>

    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
        <div class="page-header">
            <h1>Use error message that is returned from remote/callback validator</h1>
        </div>

        <div class="col-lg-8 col-lg-offset-2">
            <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                <div class="form-group">
                    <label class="col-lg-3 control-label">Username</label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="username" autocomplete="off" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Email address</label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="email" autocomplete="off" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Password</label>
                    <div class="col-lg-5">
                        <input type="password" class="form-control" name="password" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-lg-9 col-lg-offset-3">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and can\'t be empty'
                    },
                    remote: {
                        url: 'remote2.php'
                    },
                    different: {
                        field: 'password',
                        message: 'The username and password can\'t be the same as each other'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and can\'t be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    },
                    remote: {
                        url: 'remote2.php'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and can\'t be empty'
                    },
                    different: {
                        field: 'username',
                        message: 'The password can\'t be the same as username'
                    },
                    callback: {
                        callback: function(value, validator) {
                            // Check the password strength
                            if (value.length < 6) {
                                return {
                                    valid: false,
                                    message: 'The password must be more than 6 characters'
                                }
                            }

                            if (value === value.toLowerCase()) {
                                return {
                                    valid: false,
                                    message: 'The password must contain at least one upper case character'
                                }
                            }
                            if (value === value.toUpperCase()) {
                                return {
                                    valid: false,
                                    message: 'The password must contain at least one lower case character'
                                }
                            }
                            if (value.search(/[0-9]/) < 0) {
                                return {
                                    valid: false,
                                    message: 'The password must contain at least one digit'
                                }
                            }

                            return true;
                        }
                    }
                }
            }
        }
    });
});
</script>
</body>
</html>

當然這些程式碼在demo中都有。而我們需要修改為下面的ajax非同步表單驗證的形式，所以我們需要對原來程式碼進行修改。

<!DOCTYPE html>
<html>
<head>
    <title>BootstrapValidator demo</title>

    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
        <div class="page-header">
            <h1>Use error message that is returned from remote/callback validator</h1>
        </div>

        <div class="col-lg-8 col-lg-offset-2">
            <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                <div class="form-group">
                    <label class="col-lg-3 control-label">Username</label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="username" autocomplete="off" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Email address</label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="email" autocomplete="off" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Password</label>
                    <div class="col-lg-5">
                        <input type="password" class="form-control" name="password" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-lg-9 col-lg-offset-3">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and can\'t be empty'
                    },
					remote : {
							url : 'api/check_username',
							message : "該使用者名稱已經存在！",
							delay : 500,
							type : 'post',
					},
                    different: {
                        field: 'password',
                        message: 'The username and password can\'t be the same as each other'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and can\'t be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    },
                    remote: {
                        url: 'remote2.php'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and can\'t be empty'
                    },
                    different: {
                        field: 'username',
                        message: 'The password can\'t be the same as username'
                    },
                    callback: {
                        callback: function(value, validator) {
                            // Check the password strength
                            if (value.length < 6) {
                                return {
                                    valid: false,
                                    message: 'The password must be more than 6 characters'
                                }
                            }

                            if (value === value.toLowerCase()) {
                                return {
                                    valid: false,
                                    message: 'The password must contain at least one upper case character'
                                }
                            }
                            if (value === value.toUpperCase()) {
                                return {
                                    valid: false,
                                    message: 'The password must contain at least one lower case character'
                                }
                            }
                            if (value.search(/[0-9]/) < 0) {
                                return {
                                    valid: false,
                                    message: 'The password must contain at least one digit'
                                }
                            }

                            return true;
                        }
                    }
                }
            }
        }
    });
});
</script>
</body>
</html>

可以看到我們在第一個欄位 username中的remote添加了ajax驗證。delay表示的是ajax重新整理的時間是0.5秒一次。

在後臺中，我們只需要返回一個true或一個false。

最好的參考： http://1000hz.github.io/bootstrap-validator/

bootstrapValidator + Ajax表單驗證

首先，利用bootstrap Validator表單驗證進行表單驗證需要如下CSS和JS. <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <link rel="styl

非常好用的ajax表單驗證

Ajax表單驗證

registered.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request

SpringMVC+AJAX登入表單驗證問題

畢業設計，使用springMVC+AJAX（jquery）實現登入表單驗證問題，將遇到的問題記錄下來 1 controller層可以接收到前臺請求引數，但是success和error都不執行無圖言叼這是js <script type="text/javascript">

django form表單驗證，使用Ajax提交併返回提示資訊（JSON傳遞資料）

直接上程式碼: HTML，由Form外掛自動生成input標籤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax提交

BootstrapValidator表單驗證無法提交問題

用BootstrapValidator做表單驗證遇見點選submit和未執行action的情況，看網上都是加個點選事件，然後$("id").submit(),既繁瑣又不好用,幾經查詢發現BootstrapValidator驗證有給提交按鈕de 的屬性: submitButt

bootstrapValidator表單驗證

bootstrapValidator表單驗證： github下載：https://github.com/pengpengbhne/BootstrapValidator 引入js等 6 <link rel="stylesheet" href="vendor/bootstr

使用jquery validate和ajax進行表單驗證並向後臺提交資料

以前我都是在頁面中點選submit按鈕後提交給某個url一個post資料，使用validate後我們就可以使用html頁面和js來非同步的向後臺提交資料，具體程式碼如下 $("#form-product-add").validate({ rules : { tit

html5 原生表單驗證+ajax 提交

html5 原生表單驗證 + ajax 提交無需任何第三方驗證框架通過pattern 和 oninvalid 屬性統一驗證表單。 <!DOCTYPE html> <html> <head>

JS元件系列——Form表單驗證神器： BootstrapValidator

前言：做Web開發的我們，表單驗證是再常見不過的需求了。友好的錯誤提示能增加使用者體驗。博主搜尋bootstrap表單驗證，搜到的結果大部分都是文中的主題：bootstrapvalidator。今天就來看看它如何使用吧。一、原始碼及API地址介紹它之前，還是給出它的原始碼以及API的地址吧。

bootstrapValidator驗證表單驗證通過但無法提交form的原因

bootstrapValidator驗證時，使用submit提交表單，驗證通過，頁面沒有錯誤資訊。但submit按鈕未沒有提交。原因： submit標籤的name或id屬性值為submit。$('#common-form').bootstrapValidator({

Ajax應用之——表單驗證

1.關於表單驗證：一般有兩種驗證方法：客戶端的(通過JavaScript)；伺服器端的;a)原來客戶端JavaScript的缺點是：所有資料及邏輯操作完全在客戶端，因此要涉及到伺服器端的資料問題時，都需要最後點選按鈕，到伺服器端進行讀取驗證。現在改進的方法，Ajax實現更友好

bootstrapValidator表單驗證的使用，登陸Demo

需要引入內容有：jQuery的js檔案，bootstrapValidator.js ，bootstrapValidator.css檔案。 formValidatorTest.html <!DOCTYPE html> <html> <head&

bootstrap表單驗證之bootstrapValidator（非submit按鈕提交）

看了兩年CSDN第一次寫部落格就從這裡開始了，寫的不好請不要噴我~ 鑑於之前學習的東西總是忘記，沒有記錄所以在這裡記錄一下。基於bootstrap的表單驗證實現。在頁面引入需要使用的CSS和JS，引入你專案中的CSS 和 JS<%--validate--%>

【ajax技術學習】原生ajax表單使用者名稱驗證

<p></p><p></p> <%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%> <html> <head

【推薦】bootstrapValidator.min.js表單驗證外掛

/*表單驗證*/ var gets = true;//是否讓表單提交 $(function(){ // 提示資訊=========================================== $("inp

Laravel表單驗證，攔截ajax，自定義返回資料

第一步：找到app\Http\Requests\Requests類，並在類中新增以下方法 protected function failedValidation(Validator $validator) { throw new

使用validate進行表單驗證，實現ajax非同步驗證

表單 #{form @saveProject(), method:'POST', id:'saveProject'} <div class="data_info"> <div class="data_

AJAX應用之表單驗證

一。表單常用事件有三個，onsubmit（表單提交）事件，onfocus（獲得焦點）事件，onblur（失去焦點）事件。 1. onsubmit事件作用：組織或者允許表單的提交。 <form action="" method="post" o

基於Ajax,非同步表單驗證，實現有一條件不滿足不能提交

1. 頁面關鍵程式碼  <div id="register_fa"> <div id="register_win"> <a class="close" href="javascript:clos

bootstrapValidator + Ajax表單驗證

相關推薦