Question

这是我的Login.php

我使用javascript在我的登录中使用了一些验证，但有时它不起作用，有时也不起作用。我无法在代码中找到问题。

这是head.php

<script type="text/javascript" src="javascript/jquery.validate.js"></script>

我可以做些什么来让它一直有效？

<div class="widget">
   <h2>Login</h2>
   <div class="inner">
      <script type="text/javascript">
         $().ready(function() {
             // validate signup form on keyup and submit
             $("#login").validate({
                 rules: {
                     password: {
                         required: true,
                         minlength: 8,
                         maxlength: 15
                     },
                     username: {
                         required: true,
                         minlength: 3,
                     },
                 },
                 messages:{
                 password:{
                     required: "Password is required.",
                     minlength: "Password must be 8-15 characters only.",
                     maxlength: "Password must be 8-15 characters only."
                 },
                 username:{
                     required: "Username is required",
                     minlength: "Username must be 2 or more characters."
                 },
                 }
             });
         });
      </script>
      <style type="text/css">
         form.cmxform label.error, label.error {
         /* remove the next line when you have trouble in IE6 with labels in list */
         padding-top:3px;
         color: red;
         font-style: italic;
         font-size: 11px;
         float: none;
         text-align: left;
         margin-left:5px;
         width: 100px;
         }
      </style>
      <form name="login" id="login" class="cmxform" action="login.php" method="post">
         <ul id="login">
            <li>
               Username:<br>
               <input style="width:100%" type="text" name="username">
            </li>
            <li>
               Password:<br>
               <input style="width:100%" type="password" name="password">
            </li>
            <li>
               <input type="submit" Value="Login">
            </li>
            <li></li>
         </ul>
      </form>
   </div>
</div>

Answer 1

在您的代码中添加文档。

$(document).ready(function(){
    //Your Code Logic;
});

Answer 2

尝试添加"document"功能

$().ready(function(){/*implementation*/});

更改为

$(document).ready(function(){/*implementation*/});

Answer 3

使用document作为参数传递给ready事件。

$().ready()应更改为$(document).ready()

来自doc：

All three of the following syntaxes are equivalent:

$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )

Answer 4

尝试此类型：

$(function(){
///////your code.........
});

Answer 5

答案：等待DOM

正如Sanjay所写，问题/问题的正确答案/解决方案是

$(document).ready(function(){
    //Your Code Logic;
});

ready确保在DOM准备好后执行代码（请参阅Manual）。

建议：HTML5表单验证

我建议使用HTML5属性：

required
maxlength
pattern获取minlength

他们是相对的保存使用（caniuse）并且不需要JavaScript。

以下HTML5根据W3C validator有效。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>a</title>
        <style type="text/css">
            form.cmxform label.error, label.error {
                /* remove the next line when you have trouble in IE6 with labels in list */
                padding-top:3px;
                color: red;
                font-style: italic;
                font-size: 11px;
                float: none;
                text-align: left;
                margin-left:5px;
                width: 100px;
            }

            #username, #password {
                width:100%;
            }
        </style>
  </head>
  <body>
    <div class="widget">
       <h2>Login</h2>
       <div class="inner">
          <form name="login" id="login" class="cmxform" action="login.php" method="post">
             <ul>
                <li>
                   Username:<br/>
                   <input id="username" type="text" name="username" required pattern=".{3,}"/>
                </li>
                <li>
                   Password:<br/>
                   <input id="password" type="password" name="password" required pattern=".{8,15}" maxlength="15">
                </li>
                <li>
                   <input type="submit" Value="Login">
                </li>
                <li></li>
             </ul>
          </form>
       </div>
    </div>
</body>
</html>

还有一些问题：

我不确定你是否真的想要“只有角色”。如果你这样做，试试吧 pattern attribute。
您的验证脚本至少显示2个字符，但另一方面您验证3个字符
id="login"出现两次

使用jQuery进行Javascript表单验证有时无法正常工作

5 个答案:

答案：等待DOM

建议：HTML5表单验证