jquery.validate使用时遇到的问题

前端技术 2023/09/07 JavaScript

问题一：

<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();】注释掉后问题解决。

本文地址：https://www.stayed.cn/item/20267

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案