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 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
js实现百度登录窗口拖拽效果
Mar 19 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python求crc32值的方法
2014/10/05 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
Python的collections模块真的很好用
2021/03/01 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
公务员个人自我评价分享
2013/11/06 职场文书
办公室助理岗位职责
2013/12/25 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
网站推广策划方案
2014/06/04 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
关于mysql中string和number的转换问题
2022/06/14 MySQL
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers