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技术实现Tab页界面之二
Sep 21 Javascript
Javascript调用C#代码
Jan 17 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 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邮件类
2007/01/03 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php下获取http状态的实现代码
2014/05/09 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
JS高级运动实例分析
2016/12/20 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python中join函数简单代码示例
2018/01/09 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
求职信写作要突出重点
2014/01/01 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python