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

How to check if it a text input has a valid email format in ReactJS?

本文关键字：有效 格式 电子邮件 是否 输入 ReactJS 文本 检查      更新时间：2023-09-26

在ReactJS中，验证输入文本(<TextField/>)是否以电子邮件格式(如@)的正确方法是什么?

我有连接到MongoDB的应用程序，所以我应该在客户端或服务器端做电子邮件格式检查吗?

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

提前感谢!

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

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

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

你可以像

那样呈现输入
<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发出post请求时，在服务器上验证邮件，如果有效，将其存储在数据库中，否则响应错误。

你可以谷歌节点*验证库，用它们来处理所有的验证，你可以使用这里的电子邮件验证代码…

可以使用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字符)

形式为me@me.co的电子邮件将被视为电子邮件me/@me。co将被视为无效

这取决于你的TextField组件是如何实现的，但通常在React中，你通过onChange事件获得文本输入字段的值，并将其放在组件状态或其他地方(如redux store)。您的代码可能看起来像这样:

<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(/.+@.+/);
}

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

表单验证应该在客户端和服务器端完成，这里有一个很好的例子来理解如何在React中实现表单验证，使用Flux架构

您可以使用Joi库，它是如此简单，涵盖所有不同的情况下，您的表单https://www.npmjs.com/package/joi你也可以在打字稿中使用它。这很简单:创建一个包含所有输入的模式

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

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

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

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

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

相关文章：