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 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 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/06/13 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
利用php生成验证码
2017/02/23 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python进行参数传递的方法
2020/05/12 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
优秀研究生主要事迹
2014/06/03 职场文书
师德师风事迹材料
2014/12/20 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server