jQuery validate之remote

jquery.validate.js作为前端开发的利器之一,深受广大前端工程师的喜爱,然而很多人却不善于利用remote,下面,对,就是下面,下面还有,我们来看看如何更合理的利用jQuery validate的remote。


介绍的内容主要有两点:

  1. 传统情况下,我们习惯使用addMethod方法为某个input提供后端验证机制,而不善于使用remote。
  2. 为remote方法提供附加的动态参数,比如你要验证昵称有没有被使用,你需要传递一下用户id。

第一步:下载jquery.validate.js,并使用下面的语句将其加入到项目中

<script src="js/jquery.validate.js" type="text/javascript"></script>

第二步:注意remote源码,注意注释和附加参数!

remote: function( value, element, param ) {
	if ( this.optional(element) ) {
		return "dependency-mismatch";
	}

	// 已经验证过了,会从这里面取
	var previous = this.previousValue(element);
	if (!this.settings.messages[element.name] ) {
		this.settings.messages[element.name] = {};
	}
	previous.originalMessage = this.settings.messages[element.name].remote;
	this.settings.messages[element.name].remote = previous.message;

	param = typeof param === "string" && {url:param} || param;

	if ( previous.old === value ) {
		return previous.valid;
	}

	previous.old = value;
	var validator = this;
	this.startRequest(element);
	var data = {};
	data[element.name] = value;
	
	// 设置附加参数
	if($(element).attr("params")){
		// 通过eval方法将附加参数转换为object对象
		var params = eval('(' + $(element).attr("params") + ')');
		for(var p in params){
			data[p] = params[p];
		}
	}
	
	$.ajax($.extend(true, {
		url: param,// 传递的后台url,来进行数据验证
		mode: "abort",
		type: "post",
		port: "validate" + element.name,
		dataType: "json",
		data: data,//传递的参数为对应intput标签对应name和value值
		success: function( response ) {//response为后台返回数据,错误的时候返回错误提示信息,正确的时候返回true
			validator.settings.messages[element.name].remote = previous.originalMessage;
			var valid = response === true || response === "true";//如果返回true,则会进入到if语句,错误提示消失
			if ( valid ) {
				var submitted = validator.formSubmitted;
				validator.prepareElement(element);
				validator.formSubmitted = submitted;
				validator.successList.push(element);
				delete validator.invalid[element.name];
				validator.showErrors();
			} else {
				var errors = {};
				var message = response || validator.defaultMessage( element, "remote" );//如果后台返回有错误提示信息,则不会取默认显示信息
				errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
				validator.invalid[element.name] = true;
				validator.showErrors(errors);
			}
			previous.valid = valid;
			validator.stopRequest(element, valid);
		}
	}, param));
	return "pending";
}

第三步:页面上配置remote,请注意params属性!

<input type="text" class="required alphanumeric" remote="${ctx}/jade/checkCodeIsExist.do" name="code"/>

<input name="marketname" id="marketname" class="required" maxlength="50" params="{oldname:'${market.marketname}'}" type="text" value="${market.marketname}" remote="${ctx}/stocks_config/marketnameCheck.do" maxlength="10">


第四步:后台接收参数进行check,返回对应处理信息

注意:正常的时候返回true,检验不通过的时候返回错误提示信息

@RequestMapping(value = "checkCodeIsExist")
public void checkCodeIsExist(HttpServletRequest request, HttpServletResponse reponse) throws Exception {
<span style="white-space:pre">	</span>Jadeinfo jadeinfo = this.jadeinfoDAO.selectByCodeKey(StrUtil.getUTF8String(request.getParameter("code")));

	if (jadeinfo != null && jadeinfo.getDeleteflag() == 0) {
		out("商品代码已存在!", reponse);
	} else {
		out(true, reponse);
	}
}


第五步:one more thing!

来看看传统的addMethod方法,我觉得够麻烦的,对比一下remote,相形见绌哦!当然了,addMethod还是有其应用场景呢!

jQuery.validator.addMethod("codeCheck", function(value, element) {
	$.ajax({
		url : common.ctx + "/jade/jade.do?action=checkCode",// 请求的URL
		data : {
			code : value
		},// 传递给action的参数{dictTypeId:'PC_STATE'}
		async : false, // 改异步为同步
		dataType : 'json',
		success : function(records) {
			$("#checkcode").val(records);
		}
	});
	var result = $("#checkcode").val();
	if (result == "true") {
		return this.optional(element) || true;
	} else {
		return this.optional(element) || false;
	}

}),




总结:最后呢,就附上一张效果图吧,也没啥!


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉默王二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值