Bootstrap Validator Demo
<!DOCTYPE html> <html> <!-- http://localhost.zero.com:10000/BootstrapValidatorDemo.html --> <head> <title>Bootstrap Validator Demo</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Pragma" content="no-cache"/> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta name="author" content="Louis"/> <meta name="keywords" content="874 words, alice"/> <meta name="description" content="150 words"/> <meta name="renderer" content="webkit|ie-comp|ie-stand"/> <link rel="stylesheet" href="lib/bootstrap-3.3.5/css/bootstrap.css"/> <link rel="stylesheet" href="lib/bootstrapvalidator-0.5.3/css/bootstrapValidator.css"/> <link rel="stylesheet" href="css/DefaultStyle.css"/> <style type="text/css"> #form1 { width: 300px; padding: 20px; margin: 10px auto; border: 1px solid rgb(216,216,216); } </style> </head> <body> <form id = "form1" onsubmit="return false;"> <span id="spanResult">Result</span> <div class="form-group"> <label>User ID</label> <input type="text" class="form-control" name="userId" value=""/> </div> <div class="form-group"> <label>User Name</label> <input type="text" class="form-control" name="userName" value="AA张三"/> </div> <div class="form-group"> <label>Email address</label> <input type="text" class="form-control" name="email" value="alice@g.cn"/> </div> <div class="form-group"> <label>Logo image</label> <input name="imgLogo" type="file"/> </div> <div class="form-group"> <button id="btnSubmit" class="btn btn-primary">Submit</button> </div> </form> <!-- Note: bootstrap-3.3.5 should includs font folder --> <script type="text/javascript" src="lib/jquery-1.11.3.js"></script> <script type="text/javascript" src="lib/bootstrap-3.3.5/js/bootstrap.js"></script> <script type="text/javascript" src="lib/bootstrapvalidator-0.5.3/js/bootstrapValidator.js"></script> <script type="text/javascript" src="js/Utils.js"></script> <script type = "text/javascript"> $(function() { init(); }); function init() { attachButtonEvent(); setFormValidator(); } function attachButtonEvent() { $("#btnSubmit").click(function() { $('#form1').bootstrapValidator("validate"); //$('#form1').data('bootstrapValidator').validate(); if ($('#form1').data('bootstrapValidator').isValid()) { getUser1(); } }); } function getUser1() { $.ajax({ type: "GET", url: "/SpringRestDemoAPI/dummy/getUser1", data: $('#form1').serialize(), //e.g. 'userId=112&userName=Alice广东' success: function (result) { //debugger; $("#spanResult").text(result.data.userName); } }); } function setFormValidator() { $('#form1').bootstrapValidator({ message: 'This value is not valid', submitButtons: "#btnSubmit", feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { userId: { message: 'UserID 验证失败', validators: { notEmpty: { message: 'UserID 不能为空' } } }, userName: { message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' } } }, email: { validators: { notEmpty: { message: '邮箱地址不能为空' }, emailAddress: {} } }, imgLogo: { validators: { notEmpty: { message: '请选择Logo图片(jpg,png)' }, file: { extension: 'jpg,png' } } } } }); } </script> </body> </html>