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方法
Sep 29 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jquery密码强度校验
Dec 02 Javascript
js友好的时间返回函数
Aug 24 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 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中将网址转换为超链接的函数
2011/09/02 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
通过源码分析Python中的切片赋值
2017/05/08 Python
Python实现两款计算器功能示例
2017/12/19 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python中的tcp示例详解
2018/12/09 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
python文件及目录操作代码汇总
2020/07/08 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
c语言常见笔试题总结
2016/09/05 面试题
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
大学生实习证明范本
2014/09/19 职场文书
商品陈列协议书
2014/09/29 职场文书
校车安全管理责任书
2015/05/11 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android