如何在 ReactJS 中检查文本输入是否具有有效的电子邮件格式？

Question

在ReactJS中，如何验证输入的文本（<TextField/>）是否为电子邮件格式，例如带有@符号？应该在客户端还是服务器端执行电子邮件格式检查，因为我将应用程序连接到了MongoDB？任何示例或指导都将不胜感激。提前谢谢！

- user3259472

---

您在客户端执行电子邮件验证是为了优化用户体验；而在服务器端，如果您明确需要来自客户端的电子邮件，则应响应非2XX（最好是4XX）HTTP状态码。 - Sal Rahman

Answer 1

大家在这里都提出了一些有价值的观点，你需要遵循几乎所有这些观点来验证数据。

无论如何，就目前而言，我认为以下方式是进行电子邮件验证的更好方式。

1. 设置 <input type="email" />，这样浏览器可以为您验证电子邮件
2. 使用javascript进行验证
3. 在服务器上执行验证

你可以像下面这样渲染输入框：

<input type="email" value={ this.state.email } onChange={ handleOnChange } />

你的 handleOnChange 函数代码将会类似于这样

let handleOnChange = ( email ) => {

    // don't remember from where i copied this code, but this works.
    let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if ( re.test(email) ) {
        // this is a valid email address
        // call setState({email: email}) to update the email
        // or update the data in redux store.
    }
    else {
        // invalid email, maybe show an error to the user.
    }

}

注意：根据您设置的方式，您可能需要使用this.handleOnChange而不是handleOnChange，并在constructor中绑定它，如this.handleOnChange = this.handleOnChange.bind(this);

...

当您向服务器/ API发送带有电子邮件地址的POST请求时，请在服务器上验证电子邮件地址，如果有效，则将其存储在数据库中，否则请返回错误响应。

您可以通过搜索node*验证库并使用它们来处理所有验证，您可以从这里使用电子邮件验证代码...或以任何您想要的方式进行验证。

- Dhruv Kumar Jha

Answer 2

 function isValiEmail(val) {
    let regEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!regEmail.test(val)) {
      return 'Invalid Email Address';
    }
  }

- Dilusha Amarasekara

Answer 3

这可以使用JavaScript + 正则表达式进行验证。

您可以禁用提交按钮，或者在电子邮件输入与regEx格式匹配之前添加文本警告。

HTML：

<input type="text" name="email" id="email" placeholder="Email" onKeyPress="emailVerify(this.id)">

JAVASCRIPT:

function emailVerify(x){

var testEmail =    /^[ ]*([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})[ ]*$/i;
  jQuery('input').bind('input propertychange', function() {
    if (testEmail.test(jQuery(this).val()))
    {
       // action to be performed if email is valid

     } 
     else
     {
       // action to be performed if email is invalid - like disabling the submit button
     }
   });
}

每次在电子邮件文本框内进行“按键”操作时，应调用函数emailVerify()。

函数.bind()记录所有按键事件，即每当您按下键时，它将检查您的电子邮件文本框输入是否与正则表达式（testEmail字符）匹配。

形式为[e-mail]的电子邮件将被视为有效，而me/@me.co的电子邮件将被视为无效。

- It Assistors

---

根据浏览器的不同，电子邮件检查甚至不需要进行任何RegExp检查。只需将“type”设置为“email”，浏览器就会警告用户输入的字符串不是电子邮件地址。您只需要为那些没有“email”作为输入类型的陈旧浏览器执行电子邮件检查。同时，考虑使用电子邮件验证库。对于JavaScript，我们有validator.js: https://github.com/chriso/validator.js - Sal Rahman

Answer 4

这取决于你的TextField组件是如何实现的，但通常在React中，你可以通过onChange事件获取文本输入字段的值，并将其放入组件状态或其他地方（例如redux存储）。你的代码可能类似于以下内容：

<input
    type="text"
    value={this.state.email}
    onChange={event => this.setState({email: event.target.value})
/>

现在，您可以在onChange处理程序中简单地检查电子邮件的有效性，但这可能会太昂贵（因为您实际上在每次按键时重新检查）。另一种解决方案是在组件失去焦点时进行检查，如下所示：

<input
    type="text"
    value={this.state.email}
    onChange={event => this.setState({email: event.target.value})
    onBlur={() => this.setState({
        emailIsValid: isValidEmailAddress(this.state.email)
    })
/>

然后，您可以根据组件状态中emailIsValid布尔值的值向用户提供反馈，例如使用css类。

编辑：Salehen Rahman提出了关于type="email"选项的有效观点。下面的段落可能不是那么相关。

至于isValidEmailAddress实现，正则表达式是一个合理的选择。有更复杂或更简单的正则表达式来确定有效电子邮件，但仅仅具有非空字符串，然后@，然后另一个非空字符串就足够了。因此，可以使用类似以下内容：

function isValidEmailAddress(address) {
    return !! address.match(/.+@.+/);
}

- Tom Houlé

Answer 5

表单验证应该在客户端和服务器端都进行，这里有一个很好的示例，可以了解如何在React中使用Flux架构实现表单验证。

- RMontes13

Answer 6

这样就可以了 email.match(/.+@.+\..+/)

- Amin Dulkumoni

---

这是完全错误的。这个正则表达式会匹配像em@il@@email.#这样的字符串，显然不是一个电子邮件。 - Daniel

Answer 7

你可以使用 Joi 库，它非常简单并覆盖了表单的所有不同情况。https://www.npmjs.com/package/joi 你也可以在 TypeScript 中使用它。 这是一个简单的例子： 创建一个包含所有输入的模式。

schema = Joi.object({
 name: Joi.string().required(),
 email: Joi.string().email({ tlds: { allow: false } }).required()
});

在你的 handleInputChange 函数中，可以调用你的 validate 函数来验证你的模式。

const errors = schema.validate(YourInputClass, {
  abortEarly: false,
  stripUnknown: { objects: true },
});

在errors变量中，您应该找到一个包含错误对象的对象，其中包含details，用于描述所有相关错误消息，如果您的表单无效。

- KBT