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 相关文章推荐
javascript中的if语句使用介绍
Nov 20 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
微信内置浏览器私有接口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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
vue-cli中的webpack配置详解
2017/09/25 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
jquery实现穿梭框功能
2021/01/19 jQuery
python实现发送邮件及附件功能
2021/03/02 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python开头的coding设置方法
2019/08/08 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
网络安全方面的面试题
2015/11/04 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
三方协议书范本
2014/04/22 职场文书
单位消防安全责任书
2014/07/23 职场文书
员工团队活动方案
2014/08/28 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python