2. 程式人生 > 實用技巧 >jquery中用bootstrap中的表單驗證及提交

jquery中用bootstrap中的表單驗證及提交

阿新 • • 發佈：2020-12-10

Bootstrap：bootstrapValidator表單自定義驗證

例項:

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html>
<head>
<title>11</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="static/vendors/bootstrapvalidator/css/bootstrapValidator.css">
    <link type="text/css" rel="stylesheet" href="static/vendors/bootstrap/css/bootstrap.css">
 

</head>
<body>
<div class="container">
    <br>
        <form class="form-horizontal" role="form" id="form-test">
            <div class="form-group">
                <label for="username" class="col-sm-1 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" name="username" placeholder="請輸入姓名">
                </div>
            </div>
            <div class="form-group">
                <label for
 
="password" class="col-sm-1 control-label">密碼</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼">
                </div>
            </div>
            <div class="form-group">
                <label for
 
="repassword" class="col-sm-1 control-label">確認密碼</label>
                <div class="col-sm-10">
                    <input type="repassword" class="form-control" id="repassword" name="repassword" placeholder="請輸入確認密碼">
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-1 control-label">郵箱</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="email" name="email" placeholder="請輸入郵箱">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">請記住我
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-10">
                    <button type="submit" class="btn btn-default" id="btn-test">登入</button>
                </div>
            </div>
        </form>
</div>
</body>
<script src="static/vendors/jquery/js/jquery.min.js"></script>
<script src="static/vendors/bootstrapvalidator/js/bootstrapValidator.js"></script>
<script src="static/vendors/bootstrap/js/bootstrap.js"></script>
<script>
    $(function () {
        $("#form-test").bootstrapValidator({
            live: 'enabled',//驗證時機，enabled是內容有變化就驗證（預設），disabled和submitted是提交再驗證
            excluded: [':disabled', ':hidden', ':not(:visible)'],//排除無需驗證的控制元件，比如被禁用的或者被隱藏的
            submitButtons: '#btn-test',//指定提交按鈕，如果驗證失敗則變成disabled，但我沒試成功，反而加了這句話非submit按鈕也會提交到action指定頁面
            message: '通用的驗證失敗訊息',//好像從來沒出現過
            feedbackIcons: {//根據驗證結果顯示的各種圖示
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                email: {
                    validators: {
                        emailAddress: {//驗證email地址
                            message: '不是正確的email地址'
                        },
                        notEmpty: {//檢測非空
                            message: '請輸入郵箱'
                        },
                    }
                },
                password: {
                    validators: {
                        notEmpty: {//檢測非空
                            message: '請輸入密碼'
                        },
                    }
                },
                repassword: {
                    validators: {
                        notEmpty: {//檢測非空
                            message: '請輸入確認密碼'
                        },
                        identical: {//與指定控制元件內容比較是否相同，比如兩次密碼不一致
                            field: 'password',//指定控制元件name
                            message: '兩次輸入的密碼不同'
                        },
                    }
                },
                username: {
                    validators: {
                        notEmpty: {//檢測非空,radio也可用
                            message: '請輸入使用者名稱'
                        },
                        stringLength: {//檢測長度
                            min: 3,
                            max: 10,
                            message: '長度必須在3-10之間'
                        },
                        regexp: {//正則驗證
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '所輸入的字元不符要求'
                        },
                    }
                }
            }
        });
 
        function showToast(msg,shortCutFunction)
        {
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "progressBar": true,
                "positionClass": "toast-bottom-right",
                "onclick": null,
                "showDuration": "400",
                "hideDuration": "1000",
                "timeOut": "7000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
            toastr[shortCutFunction](msg,"提示");
        }
 
        $("#btn-test").click(function () {//非submit按鈕點選後進行驗證，如果是submit則無需此句直接驗證
            $("#form-test").bootstrapValidator('validate');//提交驗證
            if ($("#form-test").data('bootstrapValidator').isValid()) {//獲取驗證結果，如果成功，執行下面程式碼
                showToast("2345678","error");
                alert("yes");//驗證成功後的操作，如ajax
            }
        });
    });
</script>

相關推薦

jquery中用bootstrap中的表單驗證及提交

Bootstrap：bootstrapValidator表單自定義驗證 例項: <%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\"%>

表單驗證及正則表示式

表單基本驗證技術：為什麼要進行表單驗證？：減輕伺服器壓力 保證輸入資料符合要求

js中表單驗證中的任務執行順序初探

在寫線上運維平臺中的表單處理邏輯時，遇到困擾的地方 //驗證表單 checkForm(){

Ant Design中表單驗證使用(React)

import React from \'react\' import { Form, Input, Button, Select } from \'antd\'; const { Option } = Select;

React版Ant Design 4.5.4的Modal中表單驗證

import React from \'react\'; import { Modal, Form, Input, Button, InputNumber, Select, Checkbox, Radio } from \'antd\';

vue中表單驗證校驗

1、先在form表單中加入:rules規則屬性 2、再在<script></script>標籤中新增rules模組，建立username，password對應的規則

Bootstrap表單驗證器BootstrapValidator

在進行web開發的時候，表單驗證是常見的操作，友好的提示可以提高使用者的使用體驗，我嘗試使用了一下BootstrapValidator進行表單驗證，將使用過程和遇到的問題記錄如下。

form表單驗證及相關拓展（動態驗證）

一、前言 　　最近遇到兩個需求，一個是需要對一個表格動態生成的表單項進行校驗，還有一個是對動態生成的多個表單進行校驗。關於表單的動態校驗，這個elementui文件上也有說明傳送任意門，其他拓展的沒有詳細講解，

小程式表單提交及自定義表單驗證

wxml中的繫結 <textarea placeholder=\"文字型別\"bindblur=\'no_focus\' bindfocus=\"focus\" data-name= \"c\"></textarea>

jQuery Validatede 結合Ajax 表單驗證提交

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>新增</title>

表單提交驗證及前端密碼MD5加密

提交表單，md5加密密碼，表單優化 1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head>

web前端之鋒利的jQuery八：jQuery外掛的使用（表單驗證、表單提交）

外掛也稱擴充套件，是一種遵循一定規範的應用程式介面編寫出來的程式。1.jQuery表單驗證外掛－Validation：

分享JS表單驗證原始碼（帶錯誤提示及密碼等級）

先晒圖 index.html <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

Bootstrap簡單實用的表單驗證外掛BootstrapValidator用法例項詳解

本文例項講述了Bootstrap簡單實用的表單驗證外掛BootstrapValidator用法。分享給大家供大家參考，具體如下：

jQuery實現高度靈活的表單驗證功能示例【無UI】

本文例項講述了jQuery實現高度靈活的表單驗證功能。分享給大家供大家參考，具體如下：

JS表單驗證原始碼（帶錯誤提示及密碼等級）

先晒圖 index.html <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

手把手教你如何使用馳騁工作流程引擎的表單設計器做資料提交前的表單驗證...

>>> 手把手教你如何使用馳騁工作流程引擎的表單設計器做資料提交前的表單驗證

[JS設計模式]：策略模式及應用-獎金、表單驗證的實現（5）

介紹 策略模式的意義是定義一系列的演算法，把它們一個個封裝起來，並且使它們可相互替換。此模式讓演算法的變化不會影響到使用演算法的客戶。

bootstrap的簡單使用，離線儲存，Vue中表單輸入，動態樣式之class，常用的事件修飾符與鍵盤修飾符

Bootstrap 官網地址 https://www.bootcss.com/​https://v4.bootcss.com/ （4版本的官網） 概念 簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。一套簡單的UI框架

jquery.validate.js的Validate表單驗證

原文連線 https://blog.csdn.net/weixin_42765270/article/details/84591593 validate 一、 validate的使用步驟