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读取RSS数据
Jan 20 Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
JS实现时间校验的代码
May 25 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
vue实现验证用户名是否可用
Jan 20 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页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php实现短信发送代码
2015/07/05 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
js 文件引入实现代码
2010/04/23 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
详解动画插件wow.js的使用方法
2017/09/13 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python爬虫常用的模块分析
2014/08/29 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
python怎么调用自己的函数
2020/07/01 Python
称象教学反思
2014/02/03 职场文书
计生工作先进事迹
2014/08/15 职场文书
单位委托书怎么写
2014/09/21 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python