客户端 HTML 表单验证 [重复]

Question

我正在为我目前正在学习的课程设计一个网站。此类需要 JavaScript 来验证表单客户端。除了必须使用 JavaScript 来验证表单之外，它没有任何先决条件。

我在代码、脚本和调整我的 HTML 方面也进行了各种尝试，但我似乎无法弄清楚如何做到这一点。潜在的问题是我对 JavaScript 一无所知，对 HTML/CSS 了解一点。

这是我的 HTML 表单（和 CSS 格式）。这是一个带有姓名、电子邮件地址和评论框的简单表格。该网站不需要实际运行，因此没有连接服务器端处理或任何东西。只是简单的验证。

HTML

<form method="post" onsubmit="return validateForm()" action="demo_form.asp"
action="http://webdevfoundations.net/scripts/formdemo.asp" >

    <div class="myRow">

    <p style="color: #cc6600; padding-left: 50px;"><b>Get Our Newsletter!</b></p>
    <label style="color: #cc6600;" class="labelCol" for="myName"><b>Name:</b></label>
    <input type="text" name="myName" id="myName" />

    </div>

    <div class="myRow">
      <label style="color: #cc6600;" class="labelCol" for="myEmail"><b>E-mail:</b>  
      </label>
      <input type="text" name="myEmail" id="myEmail" />
    </div>

   <div>
     <label style="color: #cc6600;" class="labelCol" for="myComments"><b>Comments:</b>
     </label>
     <textarea name="myComments" id="myComments" rows="1" cols="30">
     </textarea>
  </div>

   <div class="mySubmit">
      <input type="submit" value="Get Newsletter" />
   </div>
</form>
</div>

这是我用来格式化的 CSS

 #myForm 
     { color: #ffffff; 
       font-family: 'PT Sans', sans-serif;   
       width: auto;
       padding: 15px;
       min-width: 400px;
     }

   .myRow 
     { padding-bottom: 20px;
     }

   .mySubmit 
     { margin-top: 10px;
       margin-left: 110px;
     }
   .labelCol 
     { float: left;
       width: 100px;
       text-align: right;
       padding-right: 10px;
     }

我不知道如何添加脚本部分来简单地验证：输入了一个名称，并且电子邮件地址有一个“@”和一个“。”作为有效的电子邮件地址。这是提供给我的示例代码，但我不知道如何实现它：

http://www.w3schools.com/js/js_form_validation.asp

对不起，如果这是一团糟，如果我的 HTML 是一场灾难。第一次做网站！

Answer 1

您现在不需要使用javascript 进行客户端验证。 HTML5 已内置用于客户端验证的属性和类型。

例如，要检查电子邮件地址中的@ 和.，您可以使用<input type=email>。

如果要检查空白字段，可以使用 required 属性：

<input type="email" required>

如需更多HTML5中的输入类型，请阅读classic article on HTML doctor。

One more article on HTML5 rocks

但是，如果您希望仅使用 javascript 进行客户端验证，client side validation using JS and DOM 上的这篇文章将会很有用。

使用 JS 验证客户端电子邮件的示例：

在 html 中输入文本并输入如下按钮：

<form>
    <input type='text' id='txtEmail'/>
    <input type='submit' name='submit' onclick='Javascript:checkEmail();'/>
</form>

现在，当单击按钮时，将调用 JavaScript 函数 Submit()。现在在head 部分写入以下代码。

 <script language="javascript">

    function checkEmail() {

        var email = document.getElementById('txtEmail');
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if (!filter.test(email.value)) {
        alert('Please provide a valid email address');
        email.focus;
        return false;
     }

}</script>

/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ 是电子邮件地址的正则表达式模式...在这里很难解释...Please see this link for more information。

在函数中，filter.test(email.value) 中的 test() 方法检查模式匹配。如果条件返回布尔值（真或假），则相应地匹配/不匹配对。