`
悲剧了
  • 浏览: 143811 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

省时省力的jquery验证框架

阅读更多
前段的表单验证,重复性高,虽然网上一大堆js代码,每当邮件,电话号码什么的验证,直接copy,但是有了这个框架真实美包包。
jquery validate 验证框架,本来想详细写写用法,发现坛子里paskaa几年前写过,不知道为何帖子沉了。


详细使用:
http://www.iteye.com/topic/276661
http://www.iteye.com/topic/280295

官方文档参考:http://docs.jquery.com/Plugins/Validation

官方那个,我感觉这个文档写的不是很详细,读了几遍还是发现有些没讲清楚



既然有了前面的东东,我发帖的主要是为了分享好东东,并且写写我们项目里demo

面对如下一个表单验证:




如果需要自己写js,那么真实悲剧啊,下面是不使用框架的代码
那个写的一个叫累,写了这么多后,发现居然没有处理获取焦点后,提示消失
$(document).ready(function() {
 		$("#errorAuthor").hide();
	    $("#errorContent").hide();
	    $("#errorverifyCode").hide();
	    $("#errorverifyCodeError").hide();
	    
	$("#verifyImage").click(function(){
	    $(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
	});
	$("#cmmAuthor").click(function() {
  		$("#errorAuthor").hide();
	});

	$("#cmmContent").click(function() {
  		$("#errorContent").hide();
	});
	$("#verifyCode").click(function() {
  		$("#errorverifyCode").hide();
  		$("#errorverifyCodeError").hide();
$.get("../productComment/prd_comt_verifyCode.action", function(data){
  			if(data=="error"){
  				$("#errorverifyCodeError").show();
  				return ;
  			}
	});
	});


	
	
	
	
});

function changeVerifyCode() {
	$("#verifyImage").attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
}

function submitForm() {
	var author=$("#cmmAuthor").attr("value");
	var content=$("#cmmContent").attr("value");
	var verifyCode=$("#verifyCode").attr("value");
	var value=$("#verifyCode").attr("value");
	if(author==""){
		$("#errorAuthor").show();
		return ;
	}
	if(content==""){
		$("#errorContent").show();
		return ;
	}
	if(verifyCode==""){
		$("#errorverifyCode").show();
		return ;
	}
  	
	
	$("form:first").submit();
} 
  



只需要做出如下更改:
先引入lib
引用

<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/core/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.min.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.messages_cn.js" type="text/javascript" language="javascript"></script>
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/additional-methods.js" type="text/javascript" language="javascript"></script>



然后直接写就可以了

<script type="text/javascript" >
$(document).ready(function() {
$("#verifyImage").click(function(){
	    $(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());
	});

	$("#productComment").validate({
		rules: {
			cmmAuthor: {
				required: true
			},
			cmmContent: {
				required: true
			},
			verifyCode:{
				required: true,
				remote: "../productComment/prd_comt_verifyCode.action"
			}
		},
		messages: {
			cmmAuthor:{
				required: "请输入您的姓名或昵称"
			},
			cmmContent:{
				required: "请输入您的评论"
			},
			verifyCode:{
				required: "请输入验证码",
				remote: "验证码不正确"
			}
		},
		
		errorPlacement: function(error,element){
			
			$("#errorMessage").append(error);
			$("#errorMessage").append($("<br/>"));
			
		},
			success: function(label) {
		}
	});	
	
});

remote为ajax验证,如果返回值是true,那么无提示,不返回就提示错误信息,这个比jqury写ajax还方便。


测试:
什么都不输入,提交


输入错误验证码,提交




    以上demo只是基本的使用,你还可以复杂的控制,比如在里面控制错误显示,demo里面的错误显示是自己在html里面控制的<span id="errorMessage" style="color: red;">,必须放到form表单内,否则错误提示在你时间触发时候不会消失,只会又生成一个提示,非常bug。
用框架控制,就紧跟message方法后面
// 定义错误信息提示的位置和样式
		errorElement: "em",	// 定义错误标记标签,<em>error</em>

		errorPlacement: function(error,element){
			element.nextAll("i").addClass("error");
			element.nextAll("i").append(error);
		},
		
		// 定义验证成功相关样式和事件
		success: function(label) {
		}
	}); 






  • 大小: 14.6 KB
  • 大小: 21.2 KB
  • 大小: 19.1 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics