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

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地址
- 电子邮件

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

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

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;
      }

      }

在formCheck调用submitForm将确保在提交给Web服务器之前验证表单。

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 个解决方案

解决方案1
2 已采纳 2011-03-01 16:19:00

解决方案2
0 2011-03-01 16:20:16

解决方案3
0 2011-03-01 16:20:17

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2011-03-01 16:19:00

解决方案2 0 2011-03-01 16:20:16

解决方案3 0 2011-03-01 16:20:17

解决方案1
2 已采纳 2011-03-01 16:19:00

解决方案2
0 2011-03-01 16:20:16

解决方案3
0 2011-03-01 16:20:17