bootstrap表单校验之bootstrapvalidator
2015-12-19 18:46
926 查看
<%@ 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="校验" onclick="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="
4000
${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>
<%
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="校验" onclick="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="
4000
${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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap采样方法的python实现
- bootstrap-datetimepicker和uploadify应用总结
- bootstrap-fileinput实现serverlet文件上传功能
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- EF+MVC+Bootstrap 项目实践 Day10
- Bootstrap学习第二课--Button
- bootstrap学习资料汇总
- Bootstrap学习第一课
- HTML+CSS+Bootstrap：第一个页面，仿Airbnb首页
- bootstrap学习
- 手机自动化测试：appium源码分析之bootstrap六 （下）
- 手机自动化测试：appium源码分析之bootstrap六 （上）
- 手机自动化测试：appium源码分析之bootstrap五 下
- 手机自动化测试：appium源码分析之bootstrap五 上
- 手机自动化测试：appium源码分析之bootstrap四
- 手机自动化测试：appium源码分析之bootstrap三
- 手机自动化测试：appium源码分析之bootstrap二
- 手机自动化测试：appium源码分析之bootstrap 2
- 手机自动化测试：appium源码分析之bootstrap 1
- BootStrap-DualListBox怎样改造成为双树