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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
layui 实现表格某一列显示图标
2019/09/19 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python正规则表达式学习指南
2016/08/02 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python实现快速计算词频功能示例
2018/06/25 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
青年教师个人总结
2015/02/11 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Java后台生成图片的完整步骤
2021/08/04 Java/Android
python使用torch随机初始化参数
2022/03/22 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android