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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
Terran剧情介绍
2020/03/14 星际争霸
php学习之变量的使用
2011/05/29 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
Python正则表达式完全指南
2017/05/25 Python
python http基本验证方法
2018/12/26 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
一份创业计划书范文
2014/02/08 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
2014组织生活会方案
2014/05/19 职场文书
教师自我剖析材料
2014/09/29 职场文书
校运会班级霸气口号
2015/12/24 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS