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制作浮动广告代码
Dec 30 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
jquery实现图片预加载
Dec 25 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
微信内置浏览器私有接口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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
js实现日期级联效果
2014/01/23 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
电子专业毕业生自我鉴定
2014/01/22 职场文书
30岁生日感言
2014/01/25 职场文书
四年级语文教学反思
2014/02/05 职场文书
2015年手术室工作总结
2015/05/11 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
导游词之无锡唐城
2019/12/12 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript