基本 JavaScript 表单验证

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

可能是因为你把if中的"I"字母大写了。

 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 表单验证

basic JavaScript form validation

javascript

forms

validation