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

我不确定如何添加脚本部分来简单验证：输入了一个名称，电子邮件地址有一个＆＃34; @＆＃34;和＆＃34;。＆＃34;作为有效的电子邮件地址。以下是呈现给我的示例代码，但我不知道如何实现它：

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

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

Answer 1

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

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

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

<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。

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

客户端HTML表单验证

1 个答案: