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 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
JavaScript实现公告栏上下滚动效果
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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
jquery创建div 实现代码
2009/04/27 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
教师推荐信范文
2013/11/24 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
争做文明公民倡议书
2014/08/29 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
大学毕业生自我评价
2015/03/02 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
限期整改通知书
2015/04/22 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python