如何在提交表单之前验证电子邮件字段不为空

Posted

技术标签:

【中文标题】如何在提交表单之前验证电子邮件字段不为空【英文标题】:How to verify that email field is not blank before submitting form 【发布时间】:2015-04-22 21:42:50 【问题描述】:

更新问题:

我在所有字段中都添加了“必填”,除非表单仍然会提交

first@second 用作电子邮件。即使缺少 .com(或其他),它也会提交。

我如何也加入此验证?

谢谢!

原问题:

我的网站有一个注册表单,其中只有一个电子邮件字段。目前有验证器来验证输入电子邮件的正确语法,但如果该字段留空,则表单提交。我需要在提交之前验证该字段是否为空白。如果它是空白的,应该会出现一些消息 - 类似于出现的消息,例如不包含 @ 符号。

我的演示页面是here.

表单html

 <div class='form animated flipInX'>
  <h2>Sign Up</h2>
<form action="http://mydomain.us10.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="a324dfsf32erwdafdaf3dfsdsdf">
<input type="hidden" name="id" value="32df32rff2">

 <input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield">

    <button class='animated infinite pulse'>Let's Go!</button>
  </form>
</div>

有什么建议吗?谢谢

【问题讨论】:

如果验证失败或者value'',则返回false。 ? 【参考方案1】:

在您的输入标签中使用required

必需的属性是布尔属性。

如果存在,它指定在提交表单之前必须填写输入字段。

所以你的输入应该是

<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required>

在这里寻找more information

更新:

type="email"是html5的通用属性。如果您需要验证,则应在输入元素中使用模式

你应该使用pattern="[a-z0-9!#$%&amp;'*+/=?^_|~-]+(?:.[a-z0-9!#$%&'*+/=?^_|~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]2|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b

这是应该使用的一种用法

<input type="email" required pattern="[a-z0-9!#$%&'*+/=?^_`|~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`|~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]2|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b">

这是jsfiddle,根据您更新的问题

【讨论】:

感谢您的反馈。 required 效果很好,但是我已经更新了我的问题,因为如果将“first@second”用作电子邮件,表单仍然会提交,基本上缺少.com。我如何也加入此验证? 完美运行!非常感谢 @Nova :很高兴为您提供帮助!【参考方案2】:

您可以在输入标签中添加required 属性。

【讨论】:

谢谢尼克。使用 required 效果很好,但如果将“first@second”用作电子邮件,表单仍将提交,基本上缺少 .com。我如何也纳入此验证? (更新了我的问题)【参考方案3】:
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield" required="true">

幸好就这么简单

【讨论】:

【参考方案4】:

在输入标签中添加required 属性的最佳方法

【讨论】:

【参考方案5】:

请检查这个解决方案,我使用 jquery 来检查它是空白还是填充

<div class='form animated flipInX'>
<h2>Sign Up</h2>
<form action="http://mydomain.us10.list-manage.com/subscribe/post"  method="POST">
<input type="hidden" name="u" value="a324dfsf32erwdafdaf3dfsdsdf">
<input type="hidden" name="id" value="32df32rff2">
<input type="email" name="MERGE0" id="MERGE0" placeholder="Your Email Address" class="boxfield">
<button class='animated infinite pulse' type="submit" onClick="checkval();">Let's Go!</button>
 </form>
</div>
 <script>
  function checkval()
  
     var email_val=$("#MERGE0").val();
     if(email_val.length>2) 
     
     
     else
     
        alert("email is required.");/*there you change show the value which you want to show as a error message.*/
         event.preventDefault();
         /* this help to stop submit form*/ 
     

   
   </script>

希望对你有所帮助

【讨论】:

您正在检查正在输入的文本的长度?? 是的,它可以检查它在 html5 中是否为空白,当我们输入空格时它会出现缺陷 所以如果我输入xyz 它会认为它是一封电子邮件,对吧?【参考方案6】:

我不知道你的问题是否已经得到解答,但试试这个:

//The Input
<input type='email' id='email' placeholder='email' onchange='emailCheck()'>
//The Button
<button id='button' style='visibility:hidden'>Submit</button>
//javascript
<script>
var input = document.getElementById('email').value;
if(input.indexOf("@") > -1)

if(input.indexOf(".com") >= input.length - 4)
document.getElementById('button').style.visibility = 'visible';
else
alert('Custom Invalid Email Alert');


else
alert('Custom Invalid Email Alert');

</script>

【讨论】:

【参考方案7】:

required 是最好的选择,或者你可以使用 java 脚本

喜欢这个

    <script type="text/javascript">
          function validateForm()
        
          var a=document.forms["Form"]["answer_a"].value;
        var b=document.forms["Form"]["answer_b"].value;
       var c=document.forms["Form"]["answer_c"].value;
        var d=document.forms["Form"]["answer_d"].value;
                   if (a==null || a=="",b==null || b=="",c==null || c=="",d==null             || d=="")
         
           alert("Please Fill All Required Field");
          return false;
           
        
        </script>

          <form method="post" name="Form" onsubmit="return         validateForm()" action="">
           <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
             <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
           <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
           <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
      </form>

【讨论】:

以上是关于如何在提交表单之前验证电子邮件字段不为空的主要内容,如果未能解决你的问题,请参考以下文章

提交表单时电子邮件值验证错误

如何验证jsp表单提交不为空

在启用提交按钮之前检查字段是不是具有有效的类并且不为空?

提交后表单不为空字段

如何阻止机器人和垃圾邮件提交评论?

仅在SELECT字段不为空时显示“提交”按钮