jquery.validate使用时遇到的问题


Posted in Javascript onMay 25, 2015

问题一:

<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script>
 $().ready(function() {
  $("#registerForm").validate();
 });
</script>
 
<form id="registerForm" method="get" action="">
 <fieldset>
  <p>
   <label for="cusername">用户名</label>
   <input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是2到10个字符">
  </p>
  <p>
   <label for="cpassword">密码</label>
   <input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密码不能为空" data-msg-minlength="至少设置6位密码">
  </p>
  <p>
   <label for="cconfirmpassword">确认密码</label>
   <input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="两次密码不一致">
  </p>
  <p>
   <label for="cemail">邮箱</label>
   <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确">
   </input>
  </p>
  <p>
   <label for="chasreferee">有推荐人请勾选</label>
   <input type="checkbox" id="chasreferee" name="hasreferee">
  </p>
  <p>
   <label for="creferee">推荐人</label>
   <input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推荐人不能为空">
   </input>
  </p>
  <p>
   <input type="submit" value="提交">
  </p>
 </fieldset>
</form>

看了之前的别人写的文章,貌似是依赖jquery.metadata.js这个库,然后写的时候以 class=”required email” 这样的形式来写,这样写起来好像有些乱,class本身是呈现样式的,现在被附上各种校验的规则,看上去似乎有些乱,不过好在新版本中,又有了新的写法,不依赖上面的js库,以 data-rule-验证规则、data-msg-提示信息 这样的格式来重新定义,更简单,更直观,更强大了。上面的测试通过

我的版本的jquery.validate1.13.js

然后这样的写法,控件中的messages不会生效,还会报错:Cannot read property 'call' of undefined 园子里面很多jquery.validate文章提到可以使用,我看是版本过时了,反正我没有试验出来。还有就是将验证卸载class里面我也是醉了。下面的测试错误!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.min.js"></script>
 
<!--<script type="text/javascript" src="jquery.validate.js"></script>-->
<script type="text/javascript" src="jquery.validate1.13.js"></script>
<script type="text/javascript" src="jquery.validate.message_cn.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript">
$(function(){
  $.metadata.setType("attr", "validate");
  $("#signupForm").validate();
  //$("#signupForm").validate({ meta: "validate" });
  //$("#commentForm").validate();
})
 
</script>
</head>
 
<body>
<form id="signupForm" method="get" action="">
  <p>
 
 
<input id="email" name="email" validate="{required:true, email:true, messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}" />
  </p>
 
  <p>
    <input class="submit" type="submit" value="Submit"/>
  </p>
</form>
 
</body>
</html>

问题二:jQuery_validate配置后无论怎样都看不到提示信息。

原因:submit()了二次。

例子:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ taglib prefix="s" uri="/struts-tags" %> 
<html> 
<head> 
<title>jquery test</title> 
<script src="js/jquery.js"></script> 
<script src="js/jquery.validate.js"></script> 
<script src="js/jquery.metadata.js"></script> 
<script src="js/messages_zh.js"></script> 
 
<script> 
$(document).ready(function() { 
     
$("#commentForm").validate({ 
             //debug:true 
             }); 
}); 
</script> 
<script type="text/javascript"> 
  function register(){ 
    document.forms[0].action = 'register/addUser.action'; 
    //document.forms[0].submit(); 
  } 
</script> 
</head> 
<body > 
  <form id="commentForm" method="post"> 
    <table style ="width:100%"> 
      <tr> 
        <td>user name:</td> 
        <td><input type="text" name="username" id="username" maxlength="10" 
          class="{required:true,minlength:6,maxlength:12}" /></td> 
      </tr> 
      <tr> 
        <td>password:</td> 
        <td><input type="password" name="password" id="password" maxlength="15" 
          class="required"/></td> 
      </tr> 
      <tr> 
        <td></td> 
        <td><input type="submit" value="Register" onclick="register();"></td> 
      </tr> 
    </table> 
  </form> 
</body> 
</html>

jQuery验证后有个提交,自己在register()中又提交了一次,将【document.forms[0].submit();】注释掉后问题解决。

Javascript 相关文章推荐
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 #Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 #Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 #Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 #Javascript
jquery控制表单输入框显示默认值的方法
May 22 #Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 #Javascript
JavaScript检测鼠标移动方向的方法
May 22 #Javascript
You might like
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
JS Timing
2007/04/21 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
SVG描边动画
2017/02/23 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python中的字符串查找操作方法总结
2016/06/27 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
原生python实现knn分类算法
2019/10/24 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis