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

Posted 2023-02-22

【中文标题】如何在 ReactJS 中检查文本输入是不是具有有效的电子邮件格式？

【英文标题】：How to check if it a text input has a valid email format in ReactJS?如何在 ReactJS 中检查文本输入是否具有有效的电子邮件格式？

【发布时间】：2017-01-14 08:57:00

【问题描述】：

在 ReactJS 中，验证输入的文本 (<TextField/>) 是否为电子邮件格式（例如使用 @）的正确方法是什么？

我已将应用程序连接到 MongoDB，那么我应该在客户端还是服务器端进行电子邮件格式检查？

任何示例或指导将不胜感激。

提前谢谢你！

【问题讨论】：

您出于用户体验的原因在客户端执行电子邮件验证；在服务器上，如果您明确需要来自客户端的电子邮件，则使用非 2XX（最好是 4XX）HTTP 状态代码进行响应。

【参考方案1】：

每个人都在这里提出了一些有效的观点，您必须遵循几乎所有这些观点来验证数据。

无论如何，到目前为止，我认为这将是推进电子邮件验证的更好方法。

设置 <input type="email" /> 以便浏览器可以为您验证电子邮件 使用 javascript 验证它 在服务器上执行验证

你可以像这样渲染输入

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

...

当您使用email address 向服务器/api 发出发布请求时，验证服务器上的电子邮件，如果有效，将其存储在数据库中，否则返回错误。

您可以只使用 google node* 验证库并使用它们来处理所有验证，您可以使用此处的电子邮件验证代码...或根据需要进行验证。

【参考方案2】：

可以使用javascript+正则表达式验证来进行

您可以禁用提交按钮或添加文本警告，直到电子邮件输入与正则表达式格式匹配。

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 将被视为无效

【讨论】：

根据浏览器的不同，电子邮件检查甚至不需要任何正则表达式检查。只需将type 设置为"email"，浏览器就会警告用户输入的字符串不是电子邮件地址。您只对那些没有"email" 作为输入类型的恐龙时代的浏览器执行电子邮件检查。此外，也许考虑使用库进行电子邮件验证。对于 JavaScript，我们有 validator.js：github.com/chriso/validator.js

【参考方案3】：

这取决于您的 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(/.+@.+/);

【参考方案4】：

表单验证应该在双方完成：客户端和服务器端也是如此，这里有一个很好的example 来了解如何使用 Flux 架构在 React 中实现表单验证

【参考方案5】：

您可以使用 Joi Library，它非常简单，并涵盖了您表单的所有不同情况https://www.npmjs.com/package/joi 你也可以将它与打字稿一起使用。 这是一个简单的： 创建一个包含所有输入的架构

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

在您的 handleInputleChange 中，您可以调用您的验证函数来验证您的架构。

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

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

【参考方案6】：

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