jQuery表单校验 Validation

最新推荐文章于 2019-09-02 00:29:36 发布

zmm0420

最新推荐文章于 2019-09-02 00:29:36 发布

阅读量543

点赞数

分类专栏： web前台技术文章标签： jquery表单验证

本文链接：https://blog.csdn.net/zmm0420/article/details/50240593

版权

web前台技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用到的插件：

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>

2 、javascript+jquery表单验证：

<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>

zmm0420

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单校验 Validation

使用到的插件：jquery.jsjquery.tools.jsjquery.validate.jsjquery.validate.methods.js1、html页面（使用到了freemarker）创建兑换活动编辑兑换活动以下信息填写有误,请重新填写
复制链接

扫一扫