bootstrap表单校验之bootstrapvalidator

最新推荐文章于 2021-04-23 21:40:12 发布

ntotl

最新推荐文章于 2021-04-23 21:40:12 发布

阅读量5.5k

点赞数

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/ntotl/article/details/50359279

版权

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用Bootstrap Validator插件实现网页表单验证的方法。通过具体示例展示了如何配置验证规则，包括必填项检查及自定义验证逻辑等，确保用户输入的有效性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
           + request.getServerName() + ":" + request.getServerPort()
           + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<html>
<head>
   <link rel="stylesheet" href="<%=path %>/assets/plugins/bootstrap-validator/vendor/bootstrap/css/bootstrap.css"/>
   <link rel="stylesheet" href="<%=path %>/assets/plugins/bootstrap-validator/dist/css/bootstrapValidator.css"/>
   <script type="text/javascript" src="<%=path %>/assets/plugins/bootstrap-validator/vendor/jquery/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="<%=path %>/assets/plugins/bootstrap-validator/vendor/bootstrap/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="<%=path %>/assets/plugins/bootstrap-validator/dist/js/bootstrapValidator.js"></script>
   <script type="text/javascript" src="<%=path %>/assets/plugins/bootstrap-validator/dist/language/zh_CN.js"></script>
   <script type="text/javascript" src="<%=path %>/assets/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#myForm').bootstrapValidator({
//        live: 'disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            areaId: {
                validators: {
                    notEmpty: {
                        message: '所属区域不能为空'
                    }
                }
            },
            activityName: {
                validators: {
                    notEmpty: {
                        message: '活动名称不能为空'
                    }
                }
            },
            startDate: {
                validators: {
                    notEmpty: {
                        message: '活动开始时间不能为空'
                    }
                }
            },
            endDate: {
                validators: {
                    notEmpty: {
                        message: '活动结束时间不能为空'
                    }
                }
            },
            allowJoinCount: {
                validators: {
                    notEmpty: {
                        message: '中奖次数不能为空'
                    }
                }
            },
            sort: {
                validators: {
                    notEmpty: {
                        message: '排序不能为空'
                    }
                }
            },
            captcha: {
                validators: {
                    callback: {
                        message: 'Wrong answer',
                        callback: function(value, validator) {
                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                            return value == sum;
                        }
                    }
                }
            }
        }
    });
});
function validateForm(){
   $('#myForm').bootstrapValidator('validate');
    var flag = ('#myForm').data('bootstrapValidator').isValid();//1.成功，0.失败

//手动设置校验

   if($("#innId").val() == ""){
       $('#innStoryEditForm').data('bootstrapValidator').updateStatus('innId', 'NOT_VALIDATED').validateField('innId');//不合法
   }else{
       $('#innStoryEditForm').data('bootstrapValidator').updateStatus('innId', 'VALIDATED').validateField('innId');//合法
   }

}
</script>
</head>
<body>
<div style="width:95%;">
   <input type="button" id="validateForm" value="校验" οnclick="validateForm();"/>
   <form class="form-horizontal" role="myForm" id="myForm">
       <input type="hidden" id="activityId" name="activityId" value="${dataInfo.activityId }"/>
       <div class="form-group">
          <label for="areaId" class="col-sm-2 control-label">所属区域</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" id="areaId" name="areaId" value="${dataInfo.areaId }">
          </div>
          <label for="activityName" class="col-sm-2 control-label">活动名称</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" id="activityName" name="activityName" value="${dataInfo.activityName }"
                placeholder="">
          </div>
       </div>
       <div class="form-group">
          <label for="activityType" class="col-sm-2 control-label">活动类型</label>
          <div class="col-sm-4">
             <select class="form-control" id="activityType" name="activityType">
             </select>
          </div>
       </div>
       <div class="form-group">
          <label for="activityRule" class="col-sm-2 control-label">活动规则</label>
          <div class="col-sm-10">
               <textarea class="form-control" id="activityRule" name="activityRule" style="resize:none;height:100px;">${dataInfo.activityRule }</textarea>
          </div>
       </div>
       <div class="form-group">
          <label for="startDate" class="col-sm-2 control-label">开始时间</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" readonly = "readonly" id="startDate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" name="startDate" value="${dataInfo.startDate }"
                placeholder="">
          </div>
          <label for="endDate" class="col-sm-2 control-label">结束时间</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" readonly = "readonly" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="endDate" name="endDate" value="${dataInfo.endDate }"
                placeholder="">
          </div>
       </div>
       <div class="form-group">
          <label for="allowJoinCount" class="col-sm-2 control-label">允许中奖次数</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" id="allowJoinCount" name="allowJoinCount" value="${dataInfo.allowJoinCount }"
                placeholder="">
          </div>
          <label for="sort" class="col-sm-2 control-label">排序</label>
          <div class="col-sm-4">
             <input type="text" class="form-control" id="sort" name="sort" value="${dataInfo.sort }"
                placeholder="">
          </div>
       </div>
   </form>
</div>
</body>
</html>