jQuery validate之remote-阿里云开发者社区

开发者社区> 沉默王二> 正文

jQuery validate之remote

简介: jQuery validate之remote
+关注继续查看

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


介绍的内容主要有两点:

传统情况下,我们习惯使用addMethod方法为某个input提供后端验证机制,而不善于使用remote。

为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;
    }
}),

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
6 0
01_spring_ 简介| 学习笔记
快速学习01_spring_ 简介
10 0
Django框架介绍与安装
软件框架就是为实现或完成某种软件开发时,提供了一些基础的软件产品, 框架的功能类似于基础设施,提供并实现最为基础的软件架构和体系 通常情况下我们依据框架来实现更为复杂的业务程序开发 二个字,框架就是程序的骨架
5 0
微服务架构 | *2.3 Spring Cloud 启动及加载配置文件源码分析(以 Nacos 为例)
Spring Cloud 要实现统一配置管理,需要解决两个问题:如何获取远程服务器配置和如何动态更新配置;在这之前,我们先要知道 Spring Cloud 什么时候给我们加载配置文件;
3 0
xshell+阿里云linux+vue+mysql开发练习
这篇文章记录了我在阿里云进行Linux基础学习的过程,以及根据阿里云进行一些简单的开发实践。
9 0
jquery获取多个相同name的input的value值
jquery获取多个相同name的input的value值
10 0
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
5 0
飞天加速计划·高校学生在家实践
我用阿里云服务器的一些心得
18 0
学习vue3之路day3
学习vue3之路day3
6 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载