jQuery表单校验 Validation
严书
使用到的插件：
jquery.js
jquery.tools.js
jquery.validate.js
jquery.validate.methods.js
1、html页面（使用到了freemarker）
<body class="input">
<div class="bar">
<#if !id??>创建兑换活动<#else>编辑兑换活动</#if>
</div>
<!-- 用于显示校验提示信息-->
<strong><span style="color:#ff0000;"><div id="validateErrorContainer" class="validateErrorContainer">
<div class="validateErrorTitle">以下信息填写有误,请重新填写</div>
<ul></ul>
</div></span></strong>
<div class="body">
<form id="inputForm" class="validate" action="exchange_activity!save.action" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="${exchangeActivity.id}" />
<input type="hidden" id="goodsIds" name="goodsIds"/>
<table class="inputTable">
<tr>
<th>
兑换活动名称:
</th>
<td>
<input type="text" <span style="color:#ff0000;"><strong>name="name"</strong></span> class="formText" value="${exchangeActivity.name}" />
<label class="requireField">*(最多10个字)</label>
</td>
</tr>
<tr>
<th>
活动简介:
</th>
<td>
<input type="text" <strong style="background-color: rgb(255, 0, 0);">name="briefInfo"</strong> class="formText {required: true, digits: true}" value="${exchangeActivity.briefInfo}" title="只允许输入零或正整数" />
<label class="requireField">*(最多15个字)</label>
</td>
</tr>
<tr>
<th>
开始时间:
</th>
<td>
<input type="text" <span style="color:#ff0000;"><strong>id="startTime" name="startTime"</strong></span> value="${(exchangeActivity.startTime?string("yyyy-MM-dd HH:mm:ss"))!}" class="Wdate checkDate" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" οnkeydοwn='if(event.keyCode==13){$("#searchButton").click();}' />
<label class="requireField">*</label>
</td>
</tr>
<tr>
<th>
结束时间:
</th>
<td>
<input type="text" <strong><span style="color:#ff0000;">id="endTime" name="endTime"</span></strong> value="${(exchangeActivity.endTime?string("yyyy-MM-dd HH:mm:ss"))!}" class="Wdate checkDate" οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" οnkeydοwn='if(event.keyCode==13){$("#searchButton").click();}' />
<label class="requireField">*</label>
</td>
</tr>
<tr>
<th>
活动banner图片:
</th>
<td>
<input type="file" name="exchangeActivityBannerImage" />
<label class="requireField">*</label>
<a href="${setting.goodsphotoUrl}${exchangeActivity.bannerImage}" target="_blank">查看</a>
</td>
</tr>
<tr>
<th>
活动说明:
</th>
<td>
<textarea name="activityExplain" class="formTextarea" >${(exchangeActivity.activityExplain)!}</textarea>
</td>
</tr>
<tr>
<th>
分享标题:
</th>
<td>
<input type="text" name="shareTitle" class="formText {maxlength:255}" value="${(exchangeActivity.shareTitle)!}" />
</td>
</tr>
<tr>
<th>
分享图片:
</th>
<td>
<input type="file" name="exchangeActivityShareImage" />
<a href="${setting.goodsphotoUrl}${exchangeActivity.shareImage}" target="_blank">查看</a>
</td>
</tr>
<tr>
<th>
分享描述:
</th>
<td>
<input type="text" name="shareDescrib" class="formText" value="${(exchangeActivity.shareDescrib)!}" />
</td>
</tr>
<tr>
<th>
活动开启/关闭:
</th>
<td>
<@checkbox id="isOpen" name="isOpen" value="${(exchangeActivity.isOpen)!}" />
</td>
</tr>
<tr>
<th>
用户初始兑换次数 :
</th>
<td>
<input type="text" name="exchangeTimes" class="formText" value="${(exchangeActivity.exchangeTimes)!'0'}" />
</td>
</tr>
<tr>
<th>
添加兑换商品:
</th>
<td>
<input type="button" class="formButton" οnclick="omnipotent('goods!selectList.action','商品列表');"
value="请选择" hidefocus="true" title="选择要分到该组的商品"/>
</td>
</tr>
</table>
<pre name="code" class="javascript"><script type="text/javascript">
//删除分组下得商品
$("#deleteOneGood").live("click", function() {
var $this = $(this);
if (confirm("您确定要删除吗？") == true) {
$this.parent().parent().remove();
var gooids = "";
$("#dataTable input[type='hidden']").each(function(){
gooids += $(this).val() +",";
});
if(gooids==""){
gooids="deleteAll";
}
$("#goodsIds").val(gooids);
}
});
<!-- 表单校验-->
$().ready(function() {
debugger;
var $inputForm=$("#inputForm");
var $validateErrorContainer=$("#validateErrorContainer");
var $validateErrorLabelContainer = $("#validateErrorContainer ul");
//表单校验
$inputForm.validate({
errorContainer: $validateErrorContainer,
errorLabelContainer: $validateErrorLabelContainer,
wrapper: "li",
errorClass: "validateError",
ignoreTitle: true,
rules: {
"name":{
required:true,
maxlength:5
},
"briefInfo":"required",
"startTime":"required",
"endTime":{
required:true,
endTimeValidation:true
},
"exchangeTimes":{
required:true,
range:[0,10]
}
},
messages: {
"name":{
required:"请填写兑换活动名称",
maxlength:"活动名称的字数超出允许范围"
},
"briefInfo":"请填写活动简介",
"startTime":"请选择活动开始时间",
"endTime":{
required:"请选择活动结束时间",
endTimeValidation:"活动结束时间选择有误！结束时间应晚于开始时间"
},
"exchangeTimes":{
required:"请填写 用户初始兑换次数",
range:"用户初始兑换次数范围为 0~10"
}
},
submitHandler: function(form) {
debugger;
var startTime=$("#startTime").val();
var endTime=$("#endTime").val();
if(Date.parse(startTime)>Date.parse(endTime)){
alert("活动结束时间选择有误！结束时间应晚于开始时间");
return false;
}
form.submit();
}
});
//自定义校验活动结束时间
$.validator.addMethod("endTimeValidation", function(value, element, params){
var startTime=$("#startTime").val();
var endTime=$("#endTime").val();
return Date.parse(startTime)<Date.parse(endTime)
});
})
</script>加强练习（注意红色字体部分，和之前对比不同的效果）：
稍微改动,即可实现：校验提示换行显示，且字体变红加粗：
<script type="text/javascript">
//删除分组下得商品
$("#deleteOneGood").live("click", function() {
var $this = $(this);
if (confirm("您确定要删除吗？") == true) {
$this.parent().parent().remove();
var gooids = "";
$("#dataTable input[type='hidden']").each(function(){
gooids += $(this).val() +",";
});
if(gooids==""){
gooids="deleteAll";
}
$("#goodsIds").val(gooids);
}
});
<!-- 表单校验-->
$().ready(function() {
debugger;
var $inputForm=$("#inputForm");
var $validateErrorContainer=$("#validateErrorContainer");
var $validateErrorLabelContainer = $("#validateErrorContainer ul");
//表单校验
$inputForm.validate({
<span style="color:#ff0000;"><strong>errorClass: "validateError",
errorPlacement: function (error, element) {
var p = $("<p style='color:red;font-weight:bold;'></p>").append(error);
p.appendTo(element.parent());
},</strong></span>
rules: {
"name":{
required:true,
maxlength:10
},
"briefInfo":{
required:true,
maxlength:15
},
"startTime":"required",
"endTime":{
required:true,
endTimeValidation:true
},
"exchangeTimes":{
required:true,
range:[0,10]
}
},
messages: {
"name":{
required:"请填写兑换活动名称",
maxlength:"活动名称的字数超出允许范围"
},
"briefInfo":{
required:"请填写活动简介",
maxlength:"活动简介的字数超出允许范围"
},
"startTime":"请选择活动开始时间",
"endTime":{
required:"请选择活动结束时间",
endTimeValidation:"活动结束时间选择有误！结束时间应晚于开始时间"
},
"exchangeTimes":{
required:"请填写 用户初始兑换次数",
range:"用户初始兑换次数范围为 0~10"
}
},
submitHandler: function(form) {
//debugger;
var startTime=$("#startTime").val();
var endTime=$("#endTime").val();
if(Date.parse(startTime)>Date.parse(endTime)){
alert("活动结束时间选择有误！结束时间应晚于开始时间");
return false;
}
form.submit();
}
});
//自定义校验活动结束时间
$.validator.addMethod("endTimeValidation", function(value, element, params){
var startTime=$("#startTime").val();
var endTime=$("#endTime").val();
return Date.parse(startTime)<Date.parse(endTime)
});
})
</script>
类似资料：