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

关键词：

【中文标题】如何在 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 字符）

将考虑格式为 me@me.co 的电子邮件，而电子邮件 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';
    
  

【讨论】：

如何检查用户是不是在文本字段中输入了超过 1 个小数？

】如何检查用户是不是在文本字段中输入了超过1个小数？【英文标题】：HowdoIcheckiftheuserhasenteredmorethan1decimalinatextfield?如何检查用户是否在文本字段中输入了超过1个小数？【发布时间】：2015-08-1219:22:15【问题描述】：我创建了... 查看详情

如何检查是不是在 KeyUp 事件的文本框中输入了数字或字母 [重复]

】如何检查是不是在KeyUp事件的文本框中输入了数字或字母[重复]【英文标题】：howtocheckwhetheranumberorletterhasbeenenteredinatextboxonKeyUpEvent[duplicate]如何检查是否在KeyUp事件的文本框中输入了数字或字母[重复]【发布时间】：2021-02-1115:11... 查看详情

如何检查用户是不是在 Meteor 中具有特定角色

】如何检查用户是不是在Meteor中具有特定角色【英文标题】：HowtocheckifauserhasaspecificroleinMeteor如何检查用户是否在Meteor中具有特定角色【发布时间】：2016-05-0203:55:38【问题描述】：我想管理Meteor应用程序的用户，为此我需要知道... 查看详情

ReactJS - 在为新行输入数据时，如何将单元格文本包装在 MaterialTable 中？

】ReactJS-在为新行输入数据时，如何将单元格文本包装在MaterialTable中？【英文标题】：ReactJS-HowcouldIwrapthecelltextinMaterialTablewhentypingindataforanewrow?【发布时间】：2020-05-0905:01:30【问题描述】：问题：在MaterialTable中输入异常长的名称... 查看详情

检测输入元素是不是在 ReactJS 中聚焦

】检测输入元素是不是在ReactJS中聚焦【英文标题】：DetectwhetherinputelementisfocusedwithinReactJS检测输入元素是否在ReactJS中聚焦【发布时间】：2015-08-1714:46:01【问题描述】：如何检测如下输入元素当前是否聚焦在ReactJS渲染函数中？<... 查看详情

Actionscript - 如何检查动态文本框的文本是不是太长？

】Actionscript-如何检查动态文本框的文本是不是太长？【英文标题】：Actionscript-howtocheckiftextistoolongfordynamictextbox?Actionscript-如何检查动态文本框的文本是否太长？【发布时间】：2014-07-2709:10:58【问题描述】：我有一个简单的动态... 查看详情

如何使用 ReactJS 将我的输入值保存到文本文件中？

】如何使用ReactJS将我的输入值保存到文本文件中？【英文标题】：HowtosavemyinputvaluestotextfilewithReactJS?【发布时间】：2020-07-2822:21:58【问题描述】：我有包含三个输入字段的联系表单，当用户单击按钮时，我想将输入值保存到文本... 查看详情

如何检查单元格是不是在 Pandas 中具有特定字符 [重复]

】如何检查单元格是不是在Pandas中具有特定字符[重复]【英文标题】：HowtocheckifacellhasaspecificcharacterinPandas[duplicate]如何检查单元格是否在Pandas中具有特定字符[重复]【发布时间】：2019-08-2304:36:30【问题描述】：所以我有一个如下... 查看详情

如何在 Java 中使用 SAX Parser 检查 xml 标签是不是具有属性？

】如何在Java中使用SAXParser检查xml标签是不是具有属性？【英文标题】：HowtocheckifxmltaghasattributesusingSAXParserinJava?如何在Java中使用SAXParser检查xml标签是否具有属性？【发布时间】：2014-07-1921:23:37【问题描述】：我想问你一个关于xml... 查看详情

如何在 C# 中快速检查两个数据传输对象是不是具有相同的属性？

】如何在C#中快速检查两个数据传输对象是不是具有相同的属性？【英文标题】：HowtoquicklycheckiftwodatatransferobjectshaveequalpropertiesinC#?如何在C#中快速检查两个数据传输对象是否具有相同的属性？【发布时间】：2010-11-0211:05:25【问题... 查看详情

如何检查标准输入在 TCL 中是不是可读？

】如何检查标准输入在TCL中是不是可读？【英文标题】：HowtocheckifstdinisreadableinTCL?如何检查标准输入在TCL中是否可读？【发布时间】：2012-02-0313:57:13【问题描述】：使用以下命令可以为stdin注册一些回调：fileeventstdinreadablethatCallb... 查看详情

如何检查对象是不是在 JavaScript 中具有特定属性？

】如何检查对象是不是在JavaScript中具有特定属性？【英文标题】：HowdoIcheckifanobjecthasaspecificpropertyinJavaScript?如何检查对象是否在JavaScript中具有特定属性？【发布时间】：2010-09-1305:19:53【问题描述】：如何在JavaScript中检查对象是... 查看详情

如何在javascript中检查我的任何文本框是不是为空[重复]

】如何在javascript中检查我的任何文本框是不是为空[重复]【英文标题】：Howtocheckiftheanyofmytextboxisemptyornotinjavascript[duplicate]如何在javascript中检查我的任何文本框是否为空[重复]【发布时间】：2012-09-0809:00:37【问题描述】：可能重... 查看详情

如何在 Reactjs 中保存输入字段？

】如何在Reactjs中保存输入字段？【英文标题】：HowtosaveinputfieldinReactjs?【发布时间】：2020-09-0213:01:58【问题描述】：我创建了两个组件App和Inner组件App组件包含一个表单。我的内部组件包含一个const数据，我进一步将它传递给dange... 查看详情

reactjs错误-onChange不是函数错误

】reactjs错误-onChange不是函数错误【英文标题】：reactjserror-onChangeisnotafunctionerror【发布时间】：2021-09-1400:16:45【问题描述】：我创建了一个包含文件输入和文本字段的字段数组。一切似乎都很好，但是当我尝试上传小图像或在文... 查看详情

如何检查字符串是不是遵循 mm/DD/yyyy 格式？

】如何检查字符串是不是遵循mm/DD/yyyy格式？【英文标题】：Howtocheckifastringfollowmm/DD/yyyyformat?如何检查字符串是否遵循mm/DD/yyyy格式？【发布时间】：2022-01-1709:16:35【问题描述】：美好的一天。我有一个android应用程序，允许用户在... 查看详情

如何实时检查文本字段输入？

】如何实时检查文本字段输入？【英文标题】：Howtochecktextfieldinputatrealtime?【发布时间】：2011-12-1303:26:21【问题描述】：我正在为我的文本字段编写验证，我发现了一些有趣的事情，即我是否可以实时检查我在文本字段中输入了... 查看详情

如何在 jQuery 验证中检查元素是不是具有类？

】如何在jQuery验证中检查元素是不是具有类？【英文标题】：HowcanIcheckelementhaveclassornotinjQueryvalidate?如何在jQuery验证中检查元素是否具有类？【发布时间】：2018-04-1804:27:59【问题描述】：在亮点上，我尝试这样：unhighlight:function(e... 查看详情