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

最新推荐文章于 2023-03-15 16:28:16 发布

Java软件小白

最新推荐文章于 2023-03-15 16:28:16 发布

阅读量3.6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： bootstrap jquery 文章标签： bootstrap 表单插件 ajax jquery

本文链接：https://blog.youkuaiyun.com/qq_34117825/article/details/55506900

效果图：

如图，这是使用Validator插件，所完成的功能，效果很强大，也很方便，这边推荐使用这种方式，最后介绍一下原始js验证写法。

首先，导入插件：

  <link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

  <script src="<%=basePath %>bootstrap/js/bootstrapValidator.min.js"></script>
  <script src="<%=basePath %>bootstrap/js/bootstrapValidator.zh_CN.js"></script>

bootstrapvalidator源码： https://github.com/nghuuphuoc/bootstrapvalidator

boostrapvalidator api：http://bv.doc.javake.cn/api/

jsp：

<div class="modal fade" id="myModal_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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">×</span></button>
                    <h4 class="modal-title" id="myModalLabel_add">新增</h4>
                </div>
                <div class="modal-body" style="height:680px;">
                        <form id="defaultForm" class="form-horizontal">
                          <div class="form-group">
                                <label class="col-sm-2 control-label" for="company_name">公司名称</label>
                                <div class="col-sm-4">
                                   <input class="form-control" id="company_name" type="text" placeholder="请输入公司名称" name="company_name"/>
                                </d