Question

我目前正在开发JavaScript。这就是我到目前为止所拥有的......

     <script type="text/javascript">

     function formCheck(){
      var emailFilter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-   Z0-9]{2,4})+$/;
    if (document.form.frmName.value==''){
    alert('Please enter your name');
    document.form.frmName.focus();
    document.getElementById("reqName").style.fontWeight="bold";
    return false;  
  }
      if (!(emailFilter.test(document.form.frmEmail.value))){
    alert('Please enter your email address correctly');
    document.form.frmEmail.focus();
    document.getElementById("reqEmail").style.fontWeight="bold";
    return false;
    }
    return true;
    } 
     function submitForm() [
     if (document.forms[0].firstName.value==""
     || document.forms[0].lastName.value=="") {
     window.alert("You must enter your first and last names!");
     return false;
      }
       else
     return true;
      }
   </script>
   </head>
   <body>
   <h2>**RSVP to my Party**</h2>
    <form action="myform" method="post" name="form" onsubmit="return formCheck()">
   <table>
  <tr>
      <td><span id="reqName"> First Name:</span></td>
      <td><input type="text" name="frmName"></td>
  </tr>
  <td><span id="reqName"> Last Name:</span></td>
      <td><input type="text" name="frmName"></td>
  </tr>
  <td><span id="reqName"> Number of Guest:</span></td>
      <td><input type="text" name="NumberofGuest"></td>
  </tr>
  <td><span id="reqName"> Time Arriving:</span></td>
      <td><input type="text" name="TimeArriving"></td>
   </tr>
  <tr>
     <td><span id="reqEmail"> Email:</span></td>
     <td><input type="text" name="frmEmail">
<input type="submit" value="Send" class="submit" /></td>
  </tr>
<tr>
  <td><span id=Submit"><input type="Submit" value="Submit" /></td>
  <td><span id="reset"><input type="reset" value="Start Over" /></td>
</tr>

  </table>
  </form>

  </body>
  </html>

我有点困惑我需要在每个代码中得到它来验证用户是否已将数据输入到所有字段中。现在我是否采取每个字段并使每个字段都有一个提交按钮供他们阅读？我知道电子邮件的工作正常。

Answer 1

在您的表单html中，调用submitForm()函数：

<form action="myform" method="post" name="form" onsubmit="return submitForm();">

然后在submitForm()函数中，调用所有测试函数：

function submitForm()
{
    if (document.forms[0].firstName.value==""
        || document.forms[0].lastName.value=="") 
    {
        window.alert("You must enter your first and last names!");
        return false;
    }
    else
        // this is short for 'if nameCheck() == true && whateverCheck == true && ...'
        return formCheck() && nameCheck() && whateverCheck();
  }

备注：如果用户犯了几个错误，你必须修改检查调用，直接找到所有错误：

    //...
    else
    {
        var allOk = true;
        allOk = formCheck() ? allOk : false;
        allOk = nameCheck() ? allOk : false;
        allOk = whateverCheck() ? allOk : false;

        return allOk;
    }

在每个测试功能的内部，您可以修改正在测试的字段以显示用户输入中的错误，例如通过更改inputLabel.style.color='red'。

修改

您应该为要测试的每个字段类型创建一个简单的函数 input type="text"的典型字段类型为：

数字字段（例如年龄）

一般文字字段（例如姓名，街道，专业......）

特定数据字段（示例:)

邮政编码

日期

时间

ip address

电子邮件

这样您就可以使用相同的函数作为名字和姓氏，而不是创建两个单独的函数。 这也意味着你可以把它们带到你的下一个项目而不需要再次编程......

这些测试函数将获取一个对象（即输入字段）并返回一个布尔值：

function testMyNameTextField(var testfield) { // check if testfield isn't null and is valid var nameTextFilter = /someregexp/; var everythingIsOk = (testfield.value != '') && (nameTextFilter.test(testfield.value)); testfield.style.borderColor = everythingIsOk ? '' : 'red'; return everythingIsOk; }

您当然可以将测试和无效字段标记分成两个不同的功能。

最后，对于您要测试的每个文本输入字段，请调用相应的测试函数。

Answer 2

将您的submitForm修改为此

function submitForm() {
     if (document.forms[0].firstName.value==""
     || document.forms[0].lastName.value=="") {
     window.alert("You must enter your first and last names!");
     return false;
      }

      }

在submitForm内调用formCheck可确保在提交给网络服务器之前验证表单。

Answer 3

您无需为每个字段提交按钮。其中每个都只是将所有字段发送到服务器。

要检查错误，您可以让表单在提交时执行js代码，如下所示：

<form action="..." onsubmit="return validateData(this)">

然后你会有一个代码：

function validateData(form) {
    if (form.age.value < 0) { 
        alert("age"); return false;
    }
    // etc
    return true;
}

您可以使用作为参数传递的表单对象来检查字段是否正确，如果数据格式正确，则返回true。如果您的函数返回false，则表单将不会被提交。

此外，您还应该在返回false之前执行alert("Field X is wrong: reason")或类似的操作，以便让用户知道未提交表单的原因。

用于验证用户输入正确信息的Javascript代码

3 个答案: