bootstrap 模态框表单验证 Validator插件

转载 2018年04月17日 10:49:26

这里写图片描述


BooStrapValidator网络引用地址:http://www.bootcdn.cn/bootstrap-validator/ 
BooStrapValidator文件下载 gitHub地址https://github.com/nghuuphuoc/bootstrapvalidator/


这里模拟了一个后台数据返回,即请求url 为 validator.json,该文件内容为 false,因为是一个文件validator.json,所以测试的请求为Get,其他请求会报错

其他请求的SpirngMVC例子:http://blog.csdn.net/peng_hong_fu/article/details/70808799

validator.json

false
  • 1

JSP页面

validator.json要与 JSP 文件处于同一目录,不同,注意请求路径

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Carousel Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!--  IE10 viewport hack for Surface/desktop Windows 8 bug
    <link href="http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

     HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
    [if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container text-center">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">修改信息</button>
</div>
<div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">用户信息修改</h4>
            </div>

            <div class="modal-body">
                <form id="updateform">
                    <div class="form-group">
                        <label for="loginname" class="control-label">用户名:</label>
                        <input type="text" class="form-control" id="loginname" name="loginname">
                    </div>
                    <div class="form-group">
                        <label for="email" class="control-label">Email:</label>
                        <input type="text" class="form-control" id="email" name="email">
                    </div>
                    <div class="form-group">
                        <label for="phone" class="control-label">电话:</label>
                        <input type="text" class="form-control" id="phone" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="address" class="control-label">收货地址:</label>
                        <textarea class="form-control" id="address" name="address"></textarea>
                    </div>
                    <div class="text-right">
                        <span id="returnMessage" class="glyphicon"> </span>
                        <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                        <button id="submitBtn" type="button" class="btn btn-primary">修改</button>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>

<script type='text/javascript'>
    var form = $('#updateform');
    $(document).ready(function () {

        form.bootstrapValidator({
            message: '输入值不合法',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                loginname: {
                    message: '用户名不合法',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 3,
                            max: 30,
                            message: '请输入3到30个字符'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
                            message: '用户名只能由字母、数字、点、下划线和汉字组成 '
                        }
                    }
                }
                , email: {
                    validators: {
                        notEmpty: {
                            message: 'email不能为空'
                        },
                        emailAddress: {
                            message: '请输入正确的邮件地址如:123@qq.com'
                        }
                    }
                }, phone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        regexp: {
                            regexp: "^([0-9]{11})?$",
                            message: '手机号码格式错误'
                        }
                    }
                }, address: {
                    validators: {
                        notEmpty: {
                            message: '地址不能为空'
                        }, stringLength: {
                            min: 8,
                            max: 60,
                            message: '请输入5到60个字符'
                        }
                    }
                }
            }
        });
    });
    $("#submitBtn").click(function () {
        //进行表单验证
        var bv = form.data('bootstrapValidator');
        bv.validate();
        if (bv.isValid()) {
            console.log(form.serialize());
            //发送ajax请求
            $.ajax({
                url: 'validator.json',
                async: false,//同步,会阻塞操作
                type: 'GET',//PUT DELETE POST
                data: form.serialize(),
                complete: function (msg) {
                    console.log('完成了');
                },
                success: function (result) {
                    console.log(result);
                    if (result) {
                        window.location.reload();
                    } else {
                        $("#returnMessage").hide().html('<label class="label label-danger">修改失败!</label>').show(300);
                    }
                }, error: function () {
                    $("#returnMessage").hide().html('<label class="label label-danger">修改失败!</label>').show(300);
                }
            })
        }
    });

</script>
</body>
</html>

bootstrap Validator 模态框、jsp、表单验证 Ajax提交

bootstrap Validator 模态框、jsp、表单验证 Ajax提交
  • qq_34117825
  • qq_34117825
  • 2017-02-17 13:02:53
  • 981

简单实用的Bootstrap3表单验证插件

  • 2017年07月07日 16:37
  • 42KB
  • 下载

boostrap表单验证插件-bootstrapValidator

1.页面引入css、js 2.页面表单 × 系统用户信息 ...
  • u011659172
  • u011659172
  • 2016-12-30 17:09:30
  • 1070

bootstrapValidator表单验证使用方法

bootstrapValidator表单验证使用方法
  • jewely
  • jewely
  • 2017-09-03 01:17:20
  • 11924

BootstrapValidator超详细教程

废话不多说,直接开始~一、引入必要文件下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)...
  • u013938465
  • u013938465
  • 2016-12-07 15:50:43
  • 72031

jquery表单验证插件Bootstrap Validator

  • 2014年07月26日 23:03
  • 702KB
  • 下载

jQuery表单验证插件Validator的使用方法

from表单数据的合法性验证是个很常见的需求,jQuery提供了一个插件:jquery validate 官网下载。    若想使用需先引用jquery.validate.js,并且要在jquery...
  • u014291497
  • u014291497
  • 2016-03-15 23:12:59
  • 3391

bootstrapValidator.js,最好用的bootstrap表单验证插件

本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validat...
  • qing_gee
  • qing_gee
  • 2015-10-13 17:50:33
  • 53204

bootstrapValidator.js验证在bootstrap4.0使用

背景 项目中使用bootstrap做前端,需要用bootstrapValidator.js做验证插件。网上找了一遍,没有支持bootstrap4.0版本的验证插件,自己动手把bootstrapVali...
  • l2000h_ing
  • l2000h_ing
  • 2017-11-13 11:18:43
  • 718

使用bootstrapValidator无法正常显示提示信息的问题

导致的原因: 1、未正确引入bootstrapValidator所需要的文件,避免css、js的引入顺序错误 2、提示图标不显示是因为需要引入glyphicons字体,在资源文件创建fonts文件...
  • Bradleyk
  • Bradleyk
  • 2017-03-16 09:32:47
  • 2382
收藏助手
不良信息举报
您举报文章:bootstrap 模态框表单验证 Validator插件
举报原因:
原因补充:

(最多只允许输入30个字)