bootstrap 表单提交验证
生活随笔
收集整理的這篇文章主要介紹了
bootstrap 表单提交验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
直接上我寫的一個實例:
<%@ 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',//指定控件namemessage: '兩次輸入的密碼不同'},}},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> </html>總結
以上是生活随笔為你收集整理的bootstrap 表单提交验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果内购挖坑实录
- 下一篇： 现场直击CGCA2022中国消费品行业C