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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
了解javascript中变量及函数的提升
May 27 Javascript
vue实现移动端省市区选择
Sep 27 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实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
php实现微信模板消息推送
2018/03/30 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
小程序实现单选多选功能
2018/11/04 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
优秀的教师个人的中文求职信
2013/09/21 职场文书
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
付款委托书范本
2014/10/05 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
自我推荐信格式模板
2015/03/24 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
学校党支部承诺书
2015/04/30 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python