javascript验证规则不起作用

问题描述：

我有以下代码和验证规则不起作用，请任何帮助！ Web浏览器无法识别javascript代码，因为活动的x控件似乎没有出现。javascript验证规则不起作用

<HTML> 
<head> 
<title>Exam entry</title> 

<script lanuage="javascript" type="text/javascript"> 

var result = true; 

function validateForm() { 

    var msg=""; 

    if (document.ExamEntry.name.value=="") { 
     msg+="you must enter your name \n"; 
     document.ExamEntry.name.focus(); 
     document.getElementById('name').style.color="red"; 
     result = false; 
    } 
    if (document.ExamEntry.subject.value=="") { 
     msg+("You must enter the subject \n"); 
     document.ExamEntry.subject.focus(); 
     document.getElementById('subject').style.color="red"; 
     result false; 
    } 
    if (document.ExamEntry.ExaminationNumber.value=="") { 
     msg+("You must enter the Examination Number \n"); 
     document.ExamEntry.ExaminationNumber.focus(); 
     document.getElementById('ExaminationNumber').style.color="red"; 
     result false; 
    } 
    if(msg==""){ 
    return result; 
    } 

    { 
    alert(msg) 
    return result; 
    } 
} 
</script> 
<form> 
     <input type="radio" name="qualification" value="GCSE">GCSE<br> 
     <input type="radio" name="qualification" value="AS">AS<br> 
     <input type="radio" name="qualification" value="A2">A2<br> 
</form> 
</head> 

<body> 
<h1>Exam Entry Form</h1> 
<form name="ExamEntry" method="post" action="success.html"> 
<table width="50%" border="0"> 
    <tr> 
     <td id="name">Name</td> 
     <td><input type="text" name="name" /></td> 
    </tr> 
    <tr> 
     <td id="subject">Subject</td> 
     <td><input type="text" name="subject" /></td> 
    </tr> 
    <tr> 
     <td id="ExaminationNumber">ExaminationNumber</td> 
     <td><input type="text" name="ExaminationNumber" /></td> 
    </tr> 
<tr> 
    <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td> 
    <td><input type="reset" name="Reset" value="Reset" /></td> 
</tr> 

</table> 
</form> 
</body> 
</HTML>

请有人帮忙，这让我气疯了！

答

你缺少上线23“=”号和29 result false;应该result = false;

提示：您可以查看您在浏览器的开发者控制台的js错误。

更新：好吧，下面的工作正常，当我测试一下：

<html> 
<head> 
    <title>Exam entry</title> 

    <script lanuage="javascript" type="text/javascript"> 

     var result = true; 

     function validateForm() { 

      var msg = ""; 

      if (document.ExamEntry.name.value == "") { 
       msg += "you must enter your name \n"; 
       document.ExamEntry.name.focus(); 
       document.getElementById('name').style.color = "red"; 
       result = false; 
      } 
      if (document.ExamEntry.subject.value == "") { 
       msg + ("You must enter the subject \n"); 
       document.ExamEntry.subject.focus(); 
       document.getElementById('subject').style.color = "red"; 
       result = false; 
      } 
      if (document.ExamEntry.ExaminationNumber.value == "") { 
       msg + ("You must enter the Examination Number \n"); 
       document.ExamEntry.ExaminationNumber.focus(); 
       document.getElementById('ExaminationNumber').style.color = "red"; 
       result = false; 
      } 
      if (msg == "") { 
       return result; 
      } 

      { 
       alert(msg) 
       return result; 
      } 
     } 
    </script> 
</head> 

<body> 
    <h1>Exam Entry Form</h1> 
    <form name="ExamEntry" method="post" action="success.html"> 
     <table style="width: 50%;" border="0"> 
      <tr> 
       <td id="name">Name</td> 
       <td> 
        <input type="text" name="name" /></td> 
      </tr> 
      <tr> 
       <td id="subject">Subject</td> 
       <td> 
        <input type="text" name="subject" /></td> 
      </tr> 
      <tr> 
       <td id="ExaminationNumber">ExaminationNumber</td> 
       <td> 
        <input type="text" name="ExaminationNumber" /></td> 
      </tr> 
      <tr> 
       <td> 
        <input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td> 
       <td> 
        <input type="reset" name="Reset" value="Reset" /></td> 
      </tr> 
     </table> 
    </form> 
</body> 
</html>

由于某种原因，我在我原来的一个做，但不是在这里是什么都错了吗？ – 2013-10-18 12:45:55

他们在但仍然没有工作，还有什么帮助？ JavaScript正在运行，因为它正在改变颜色，但没有显示错误消息？ – 2013-10-18 13:07:46

@SamanthaMclemon：当你可能指'msg + =（...）'时，你在几个地方写'msg +（...）'。 – 2013-10-20 09:30:08

答

有几个原因，你的问题的代码片段将失败。我要指出的一些缺陷：

不应该有在头节形式
document.ExamEntry是无效的。正确的将是document.forms['ExamEntry']
类似document.ExamEntry.subject是不可能的。链接子节点不起作用。 DOM需要使用提供的DOM方法遍历。我建议您阅读诸如http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/

我已经修改了JavaScript和包括了jsFiddle，使验证工作的教程。这是一个快速修复。我增加了一个叫做getInputByName一个辅助功能：

<script type="text/javascript"> 

function getInputByName(inputName) { 
    var inputs = document.getElementsByTagName('input'); 

    for (var i = 0, ii = inputs.length, input; i < ii, input = inputs[i]; i++) { 
     if (input.name === inputName) { 
      return input 
     } 
    } 
    return false; 
} 



function validateForm() { 

    var result = true; 

    var msg=""; 

    if (getInputByName('name').value=="") { 
     msg+="you must enter your name \n"; 
     getInputByName('name').focus(); 
     document.getElementById('name').style.color="red"; 
     result = false; 
    } 


    if (getInputByName('subject').value=="") { 
     msg+("You must enter the subject \n"); 
     getInputByName('subject').focus(); 
     document.getElementById('subject').style.color="red"; 
     result = false; 
    } 

    if (getInputByName('ExaminationNumber').value=="") { 
     msg+("You must enter the Examination Number \n"); 
     getInputByName('ExaminationNumber').focus(); 
     document.getElementById('ExaminationNumber').style.color="red"; 
     result = false; 
    } 

    if (msg == ""){ 
     return result; 
    } else { 
     alert(msg) 
     return result; 
    } 
} 
</script>

javascript验证规则不起作用

相关推荐