Question

我正在测试，习惯了表格。我正在尝试让JavaScript检查它的值，并在它旁边显示一条消息，如果没有填写的话。够简单吧？

    <script>
        function ValidateForm() {
        var x = document.forms["Form"]["fName"].value;

        If (x==null || x=="") { 
        document.getElementById("FN").innerHTML = "This field must be filled in"; }

        }
    </script>
<body>
        <form name="Form" onload="ValidateForm()">
        First Name: <input type="text" name="fName"> <p id="FN"></p>
        Last Name: <input type="text" name="sName"> <p id="SN"></p>

        </form>

</body>

不幸的是，paragrapgs“FN”和“SN”仍为空载。我知道这不是一个实用的东西，因为验证不会刷新，只有当字段被绑定为空时才运行onload但我稍后会添加垃圾，我已经知道如何使用。

我怎样才能让它发挥作用？

Answer 1

这可能是因为你把这封信大写了＃34;我＆＃34;如果。

 If (x==null || x=="") {

应该是

 if (x==null || x=="") {

Answer 2

只需使用必需的属性：

<form name="Form">
  First Name: <input type="text" name="fName" required> <p id="FN"></p>
  Last Name: <input type="text" name="sName" required> <p id="SN"></p>
</form>

http://html5doctor.com/html5-forms-introduction-and-new-attributes/#required

聪明地工作，而不是努力;）

因为这不是有用的......

<html>
  <head>
    <script>
        function ValidateForm() {
          var x = document.forms["Form"]["fName"].value;

          if (x === null || x === "") { 
            document.getElementById("FN").innerHTML = "This field must be filled in"; }
        }
      </script>
  </head>
  <body onload="ValidateForm()">
    <form name="Form">
      First Name: <input type="text" name="fName"> <p id="FN"></p>
      Last Name: <input type="text" name="sName"> <p id="SN"></p>
    </form>
  </body>
</html>

Answer 3

第一个问题是一个简单的错误，If应该是if：

if (x==null || x=="") {

下一个问题是<form>标记不支持onload事件，因此该函数不会运行。而是在加载DOM时或在<form>：

之后执行此操作

<form name="Form">
  First Name: <input type="text" name="fName"> <p id="FN"></p>
  Last Name: <input type="text" name="sName"> <p id="SN"></p>
</form>
<script>ValidateForm();</script>

基本的JavaScript表单验证

3 个答案: