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 相关文章推荐
node.js中的console.log方法使用说明
Dec 09 Javascript
javascript实现Table排序的方法
May 15 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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静态类的原罪详解
2013/05/06 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
Java程序员面试题
2013/07/15 面试题
计算机科学系职业生涯规划书
2014/03/08 职场文书
甘南现象心得体会
2014/09/11 职场文书
秋季运动会加油词
2015/07/18 职场文书
运动会通讯稿300字
2015/07/20 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
MySQL触发器的使用
2021/05/24 MySQL
php png失真的原因及解决办法
2021/10/24 PHP
pt-archiver 主键自增
2022/04/26 MySQL