Question

我正在构建为我的登录表单添加JavaScript验证，我可以根据某些条件成功验证用户名，但是我很难验证密码输入。任何帮助将不胜感激。非常感谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>An AJAX Username Verification Tool</TITLE>
<META NAME="Keywords" CONTENT="form, username, checker">
<META NAME="Description" CONTENT="An AJAX Username Verification Script">

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />

<SCRIPT type="text/javascript">


 pic1 = new Image(16, 16); 
 pic1.src = "loader.gif";

 $(document).ready(function(){

 $("#username").change(function() { 

 var usr = $("#username").val();

   if(usr.length <= 4)
 {
    $("#status").html('<font color="red">The username should have more than      <strong>4</strong> characters.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
 }
    else if(usr.length >= 14)
 {
$("#status").html('<font color="red">The username not be longer than <strong>14</strong> characters.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
 }
  else if(usr.indexOf('@') === -1 )
 {
$("#status").html('<font color="red">Please insert correct <strong>Email</strong> format.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
 }
    else
{
  $("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

  $.ajax({  
  type: "POST",  
  url: "check.php",  
  data: "username="+ usr,  
  success: function(msg){  

 $("#status").ajaxComplete(function(event, request, settings){ 

if(msg == 'OK')
{ 
    $("#username").removeClass('object_error'); // if necessary
    $("#username").addClass("object_ok");
    $(this).html('&nbsp;<img src="tick.gif" align="absmiddle">');
}  
else  
{  
    $("#username").removeClass('object_ok'); // if necessary
    $("#username").addClass("object_error");
    $(this).html(msg);
}  

   });

   } 

    }); 
}

  });
    // HERE IS WHERE I AM HAVING THE PROBLEMS
    $("#password").change(function() { 

    var pass = $("#password").val();
    if(pass.length <= 4){

    $("#status2").html('<font color="red">The username should have more than <strong>4</strong> characters.</font>');
    $("#password").removeClass('object_ok'); // if necessary
    $("#password").addClass("object_error");
    }

  });
  // END OF PROBLEM
  });


  </SCRIPT>

  </HEAD>

   <BODY>
   <center>

  <div align="center">

  <h2 align="center">AJAX Username Verification</h2>



  <form>
    <table width="700" border="0">  
      <tr>
  <td width="200"><div align="right">Username:&nbsp;</div></td>
  <td width="100"><input id="username" size="20" type="text" name="username"></td>
  <td width="400" align="left"><div id="status"></div></td>
</tr> 

<tr>
  <td width="200"><div align="right">Password:&nbsp;</div></td>
  <td width="100"><input size="20" type="text" name="password"></td>
  <td width="400" align="left"><div id="status2"></div></td>
</tr> 

<tr>
     <td width="200"><div align="right">Confirm Password:&nbsp;</div></td>
    <td width="100"><input size="20" type="text" name="confirm_password"></td>
   <td width="400" align="left"><div id="status3"></div></td>
   </tr> 
    </table>
  </form>

  </div>
   </center>

   </BODY>
  </HTML>

Answer 1

您尚未将ID放在password字段上。

<td width="100"><input size="20" type="text" name="password"></td>这应该像是
<td width="100"><input size="20" type="text" id="password"></td>

因此，您可以将此<tr>替换为此

<tr>
  <td width="200"><div align="right">Password:&nbsp;</div></td>
  <td width="100"><input size="20" type="text" name="password" id="password"></td>
  <td width="400" align="left"><div id="status2"></div></td>
</tr>

Answer 2

首先，您必须为输入分配ID“password”，然后JQUERY可以找到此输入。而且，我认为，将密码输入的属性“type”更改为“password”会更好：

<input size="20" type="password" name="password" id="password"/>

Javascript表单验证

2 个答案: