设为首页 加入收藏

TOP

如何使用jQuery的validate
2015-02-02 14:36:55 来源: 作者: 【 】 浏览:8
Tags:如何 使用 jQuery validate

前言:经过一系列的调查,终于弄清楚了jqgrid的validate的remote用法,用起来很强大,并且很方便,下面进行一些总结


第一步:准备材料jquery.validate.js,加载到你项目中


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


第二步:先查看一下remote的源码,你就会明白很多,我是通过firebug进行调查弄清楚的,把关键点的注释写了出来


// http://docs.jquery.com/Plugins/Validation/Methods/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;
? ?$.ajax($.extend(true, {
? ? url: param,// 传递的后台url,来进行数据验证
? ? mode: "abort",
? ? 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设置,对后台的请求地址传递过去



第四步:在后台接收参数进行处理,返回对应处理信息,注意,正常的时候返回true,检验不通过的时候返回错误提示信息


@RequestMapping(value = "checkCodeIsExist")
?public void checkCodeIsExist(HttpServletRequest request, HttpServletResponse reponse) throws Exception {
? Jadeinfo jadeinfo = this.jadeinfoDAO.selectByCodeKey(StrUtil.getUTF8String(request.getParameter("code")));


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


总结:ok,以上步骤就完成了remote的使用,非常简便和爽快,但是在我没有阅读源码之前来回的尝试了很多次,都觉得不是很好用,看源码还是很值得去做的。好了,上传一个效果图吧


如何使用jQuery的validate


------------------------------------------分割线------------------------------------------


--------------------------------------分割线 --------------------------------------


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Python 数据类型及其用法 下一篇Java多个线程之间处理共享数据的..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: