Question

我想知道如何确认电子邮件在提交给signUp.php之前使用javascript进行@符号？

<form action='signUp.php'>
    <input type='text' name='email'>
    <input type='text' name='firstName'>
    <button value='submit'>
</form>

Answer 1

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
// it's valid so do something
}
else {
// it's not valid so do something else
}

Answer 2

您需要使用此javascript：

/@/.test(document.forms[0].email.value)

在您的表单中：

<button value='submit' onclick='javascript: if (/@/.test(document.forms[0].email.value) == true) { document.forms[0].submit(); } else { return; }' />

我最好选择使用以下内容：

HTML：

<form action='signUp.php' id='theform'>
    <input type='text' name='email' id='email'>
    <input type='text' name='firstName'>
    <button value='submit' onclick='javascript: checkform(); return;'>
</form>

使用Javascript：

var checkform = function() {
  var theform = document.getElementById('theform');
  if (is_email(document.getElementById('email').value))) {
    theform.submit();
  }
  return;
}
var is_email = function(val) {
  return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum|travel)$/.test(val)
}

^[a-zA-Z0-9._%+-]+@[A-Z0-9.-]+\.(?:[a-zA-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum|travel)$是regular expression，它检查的值是否是有效的电子邮件地址字符串。在您的问题中，您已经要求测试字符串中是否存在@，但是，嘿！ not@email将匹配！您当然不希望允许这样的字符串被视为有效的电子邮件字符串。

基本上，您希望在表单提交操作之前检查表单数据。所以你可以这样做：

<form onsubmit='if (!checkform()) reutrn;'> 或
<input type='submit' onclick='checkform()' />

在checkform函数中验证字段数据，如果验证通过，则在html表单对象上调用submit方法，然后返回false或不返回任何内容（例如return;）否则。

您还应该了解如何在regular expressions here

中使用javascript

Answer 3

您可以捕获表单上的提交事件，检查电子邮件值，并有条件地允许或拒绝发布表单。使用jQuery（因为..为什么不呢？）你会做这样的事情：

<script>
$(document).ready(function()
{
    $('form').get(0).submit(function(event)
    {
        var email = $(this).find('input[name=email]').val();
        if (email.match(/.+?@.+/) == false)
        {
            event.preventDefault();
            return false;
        }
    });
});
</script>

Answer 4

只需使用type="email"和旧版浏览器的HTML5表单模拟即可 http://thecssninja.com/javascript/H5F
https://github.com/ryanseddon/H5F

<input type='email' name='email'>

这不仅验证它包含@，还验证了正确的结构。

Answer 5

您必须在服务器上进行验证，但您可以通过首先检查客户端来增加一些用户便利性：

function checkEmail(el) {
  return /@/.test(el.value);
}

或者更友好一点：

function checkEmail(el) {
  if (!/@/.test(el.value)) {
    alert('Your e-mail address doesn\'t have an "@"' +
          ' sign, please add one');
    return false;
  }
}

在页面中：

<form ... onsubmit="return checkEmail(this.email);" ...>

在表单中发送获取请求之前确认输入

5 个答案: