Question

嗨，我有这个代码，我无法让它工作。我是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>

Answer 1

试试这个，我希望它会有所帮助。你需要改进你的html，在每个属性的值附近加上引号，例如 type =“text”name =“uname”，你所写的只是javascript，而不是jquery，所以你也不需要包括那个.js文件。在你的函数validateUsername中，uname保存用户输入的字符数，如果它小于5，则errormsg（div的id）将显示等待 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>

Answer 2

（uname＆lt; 5）必须是（uname.length＆lt; 5）我猜

Answer 3

你的一些问题是：

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

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

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

此外，在HTML ID中，整个文档中需要唯一。所以你不能让2个输入字段的id为“errormsg”，你必须给它们不同的。

另外，正如Wezelkrozum发现你需要测量用户名的长度。

Answer 4

您可以使用代码在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>

几点说明：

开始学习jQuery库可能会让您受益匪浅。您在代码中引用了jQuery，但是您没有使用它。我发布的示例确实使用了jQuery。
尽量避免使用内联javascript。放置onBlur="javascript:validateUsername()"等javascript事件在你的HTML内部可能会很乱并导致维护问题。
关闭您的html属性。 id=errormsg"应为id="errormsg"
你也可能觉得值得给Javascript Enlightenment一个读取。

我无法运行我的代码

4 个答案: