bootstrap 表单提交验证
生活随笔
收集整理的這篇文章主要介紹了
bootstrap 表单提交验证
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
直接上我寫的一個(gè)實(shí)例:
<%@ 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="請(qǐng)輸入姓名"></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="請(qǐng)輸入密碼"></div></div><div class="form-group"><label for="repassword" class="col-sm-1 control-label">確認(rèn)密碼</label><div class="col-sm-10"><input type="repassword" class="form-control" id="repassword" name="repassword" placeholder="請(qǐng)輸入確認(rèn)密碼"></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="請(qǐng)輸入郵箱"></div></div><div class="form-group"><div class="col-sm-offset-1 col-sm-10"><div class="checkbox"><label><input type="checkbox">請(qǐng)記住我</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',//驗(yàn)證時(shí)機(jī)，enabled是內(nèi)容有變化就驗(yàn)證（默認(rèn)），disabled和submitted是提交再驗(yàn)證excluded: [':disabled', ':hidden', ':not(:visible)'],//排除無需驗(yàn)證的控件，比如被禁用的或者被隱藏的submitButtons: '#btn-test',//指定提交按鈕，如果驗(yàn)證失敗則變成disabled，但我沒試成功，反而加了這句話非submit按鈕也會(huì)提交到action指定頁面message: '通用的驗(yàn)證失敗消息',//好像從來沒出現(xiàn)過feedbackIcons: {//根據(jù)驗(yàn)證結(jié)果顯示的各種圖標(biāo)valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {email: {validators: {emailAddress: {//驗(yàn)證email地址message: '不是正確的email地址'},notEmpty: {//檢測非空message: '請(qǐng)輸入郵箱'},}},password: {validators: {notEmpty: {//檢測非空message: '請(qǐng)輸入密碼'},}},repassword: {validators: {notEmpty: {//檢測非空message: '請(qǐng)輸入確認(rèn)密碼'},identical: {//與指定控件內(nèi)容比較是否相同，比如兩次密碼不一致field: 'password',//指定控件namemessage: '兩次輸入的密碼不同'},}},username: {validators: {notEmpty: {//檢測非空,radio也可用message: '請(qǐng)輸入用戶名'},stringLength: {//檢測長度min: 3,max: 10,message: '長度必須在3-10之間'},regexp: {//正則驗(yàn)證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按鈕點(diǎn)擊后進(jìn)行驗(yàn)證，如果是submit則無需此句直接驗(yàn)證$("#form-test").bootstrapValidator('validate');//提交驗(yàn)證if ($("#form-test").data('bootstrapValidator').isValid()) {//獲取驗(yàn)證結(jié)果，如果成功，執(zhí)行下面代碼showToast("2345678","error");alert("yes");//驗(yàn)證成功后的操作，如ajax}});}); </script> </html>總結(jié)
以上是生活随笔為你收集整理的bootstrap 表单提交验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果内购挖坑实录
- 下一篇： Ubuntu20.04使用摸索（二）——