-3

嗨，我有这个代码，但我无法让它工作。我是 Ajax jQuery 和 JavaScript 的新手，所以请善待 :) 并感谢您的帮助 :) 这段代码应该是一个简单的表单验证，但是当我进入下一个输入框时它什么也不做。它应该显示 uname 长度小于 5 个字符的错误消息。谢谢！

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function validateUsername(){
    var uname=document.getElementById("uname").value;
    if(uname<5){
        document.getElementById("errormsg").value = "wait";
    }

}
</script>

<body>
<form method=post id=regform action=jscript.html>
<table>
    <tr>    
        <td>Username</td>
        <td><input type=text name=uname id=uname onBlur="javascript:validateUsername()"/></td>
        <td><input type=hidden name=errormsg value='' id=errormsg"/></td>
    </tr>
    <tr>    
        <td>Password</td>
        <td><input type=text name=uname id=uname onBlur="javascript:validatePassword()"/></td>
        <td><input type=hidden name=errormsg value='' id=errormsg"/></td>
    </tr>
</table>
</form>

4

4 回答 4

2

试试这个，我希望它会有所帮助。你需要改进你的 html，在每个属性的值周围加上引号，比如 type="text" name="uname"并且你写的只是 javascript，而不是 jquery，所以你也不需要包含那个 .js 文件。在您的函数 validateUsername 中，uname 保存用户输入的字符数，如果小于 5，则 errormsg（这是 div 的 id）将显示wait msg

您不需要输入 type="hidden" 向用户显示错误消息，为此使用 DIV 或 SPAN

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function validateUsername(){
    var uname=document.getElementById("uname").value.length;
if(uname<5){
    document.getElementById("errormsg").innerHTML = "wait";
}

}
</script>
</head>
<body>
<form method="post" id="regform" action="jscript.html">
<table>
<tr>    
    <td>Username</td>
    <td><input type="text" name="uname" id="uname" onBlur="validateUsername()"/></td>
    <td><div id="errormsg"></div></td>
</tr>
<tr>    
    <td>Password</td>
    <td><input type="text" name="pass" id="pass" /></td>
    <td></td>
</tr>
</table>
</form>
</body>
</html>
于 2012-05-05T04:03:21.683 回答
1

(uname<5) 必须是 (uname.length<5) 我猜

于 2012-05-05T04:04:40.857 回答
1

您的一些问题是：

 <input type=hidden name=errormsg value='' id=errormsg"/>

您在值周围缺少一组引号id。它应该是：

 <input type=hidden name=errormsg value='' id="errormsg"/>

此外，在 HTML 中，id 需要在整个文档中是唯一的。因此，您不允许有 2 个 ID 为“errormsg”的输入字段，您必须给它们不同的输入字段。

此外，正如 Wezelkrozum 所发现的，您需要测量用户名的长度。

于 2012-05-05T04:10:27.177 回答
0

您可能会受益于在jsbin或jsfiddle中使用您的代码测试您的代码。

这是一个活生生的例子，说明你可以如何解决你的问题。

http://jsbin.com/oyejic/7/edit#javascript,html,live

我鼓励你使用 jsbin 中的示例。下面是来自 jsbin 示例的代码（删除了库的外部链接）。

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="jquery.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
<form method="post" id="regform" action="jscript.html">
<table>
    <tr>    
        <td>Username</td>
        <td><input type="text" name="uname" id="uname" /></td>
        <td><input type="hidden" name="uname_errormsg" value="" id="uname_errormsg" /></td>
    </tr>
    <tr>    
        <td>Password</td>
        <td><input type="text" name="pword" id="pword" /></td>
        <td><input type="hidden" name="pword_errormsg" value="" id="pword_errormsg" /></td>
    </tr>
</table>
</form>

  <div id="testing"></div>

<script type="text/javascript">
function validateField( inputID ) {
    var fieldName = $('#' + inputID).val();
    if ( fieldName.length < 5 ) {
        $('#' + inputID + '_errormsg').val("wait");
        $("#testing").empty()
                     .text("hey, wait " + inputID + "!" ); 
    } else {
        $("#testing").empty()
                     .text("Ah, 5 or more characters for " + inputID + "!" );     
    }
} 

  $("#uname, #pword").blur(function() {
    validateField( this.id ); 
  });
  </script>
</body>
</html>

几点注意事项：

  1. 通过开始学习jQuery库，您可能会受益。您在代码中引用了 jQuery，但您没有使用它。我发布的示例确实使用了 jQuery。

  2. 尽量避免使用内联 javascript。将 javascript 事件（例如onBlur="javascript:validateUsername()" 直接放在 html 中）可能会很混乱并导致维护问题。

  3. 关闭您的 html 属性。id=errormsg"应该id="errormsg"

  4. 您可能还会发现值得一读Javascript Enlightenment 。

于 2012-05-05T04:29:57.693 回答