首页 > 代码库 > 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap+jQuery.validate Form表单验证实践
项目结构 :
github 上源码地址:https://github.com/starzou/front-end-example 点击打开
1、form 表单代码
[html] view plaincopy
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap Form Template</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"plugins/bootstrap/css/bootstrap.css"/>
- </head>
- <body>
- <div class="container">
- <h1 class="text-center text-danger">Form 示例</h1>
- <form role="form" class="form-horizontal" action="javascript:alert(‘验证成功,可以提交.‘);" method="post">
- <div class="form-group">
- <label class="col-md-2 control-label" for="name">Name</label>
- <div class="col-md-10">
- <input class="form-control" name="name" type="text" id="name" placeholder="Name" value=http://www.mamicode.com/"" />
- </div>
- </div>
- <div class="form-group">
- <label class="col-md-2 control-label" for="exampleInputPassword1">Password</label>
- <div class="col-md-10">
- <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
- </div>
- </div>
- <div class="form-group">
- <label for="intro" class="control-label col-md-2">Intro</label>
- <div class="col-md-10">
- <textarea id="intro" class="form-control" rows="3" name="intro" placeholder="Intro"></textarea>
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-md-2">Gender</label>
- <div class="col-md-10">
- <label class="radio-inline">
- <input type="radio" name="gender" value=http://www.mamicode.com/"男" />
- boy </label>
- <label class="radio-inline">
- <input type="radio" name="gender" value=http://www.mamicode.com/"女" />
- gril </label>
- </div>
- </div>
- <div class="form-group">
- <label for="hobby" class="control-label col-md-2">Hobby</label>
- <div class="col-md-10">
- <div class="checkbox">
- <label>
- <input type="checkbox" name="hobby" value=http://www.mamicode.com/"Music">
- Music</label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="hobby" id="" value=http://www.mamicode.com/"Game" />
- Game </label>
- </div>
- <label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox1" value=http://www.mamicode.com/"option1">
- option1 </label>
- <label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox2" value=http://www.mamicode.com/"option2">
- option3</label>
- <label class="checkbox-inline">
- <input type="checkbox" id="inlineCheckbox3" value=http://www.mamicode.com/"option3">
- option3 </label>
- </div>
- </div>
- <div class="form-group">
- <label for="sel" class="control-label col-md-2">Select</label>
- <div class="col-md-10">
- <select multiple="" id="sel" name="sel" class="form-control">
- <option value=http://www.mamicode.com/"1">1</option>
- <option value=http://www.mamicode.com/"2">2</option>
- <option value=http://www.mamicode.com/"3">3</option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <div class="col-md-offset-2 col-md-10">
- <button type="submit" class="btn btn-primary btn-sm">
- Submit
- </button>
- <button type="reset" class="btn btn-primary btn-sm">
- Reset
- </button>
- </div>
- </div>
- </form>
- </div>
- <script src=http://www.mamicode.com/"plugins/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
- <script src=http://www.mamicode.com/"plugins/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
- <script src=http://www.mamicode.com/"plugins/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
- <script src=http://www.mamicode.com/"scripts/form.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- MyValidator.init();
- </script>
- </body>
- </html>
需要引用 jquery.js,bootstrap.js,jquery.validate.js 库
2、form.js 代码
[javascript] view plaincopy
- var MyValidator = function() {
- var handleSubmit = function() {
- $(‘.form-horizontal‘).validate({
- errorElement : ‘span‘,
- errorClass : ‘help-block‘,
- focusInvalid : false,
- rules : {
- name : {
- required : true
- },
- password : {
- required : true
- },
- intro : {
- required : true
- }
- },
- messages : {
- name : {
- required : "Username is required."
- },
- password : {
- required : "Password is required."
- },
- intro : {
- required : "Intro is required."
- }
- },
- highlight : function(element) {
- $(element).closest(‘.form-group‘).addClass(‘has-error‘);
- },
- success : function(label) {
- label.closest(‘.form-group‘).removeClass(‘has-error‘);
- label.remove();
- },
- errorPlacement : function(error, element) {
- element.parent(‘div‘).append(error);
- },
- submitHandler : function(form) {
- form.submit();
- }
- });
- $(‘.form-horizontal input‘).keypress(function(e) {
- if (e.which == 13) {
- if ($(‘.form-horizontal‘).validate().form()) {
- $(‘.form-horizontal‘).submit();
- }
- return false;
- }
- });
- }
- return {
- init : function() {
- handleSubmit();
- }
- };
- }();
基于Bootstrap+jQuery.validate Form表单验证实践
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。