<TextField/>
)是否为电子邮件格式,例如带有@符号?应该在客户端还是服务器端执行电子邮件格式检查,因为我将应用程序连接到了MongoDB?任何示例或指导都将不胜感激。提前谢谢!<TextField/>
)是否为电子邮件格式,例如带有@符号?应该在客户端还是服务器端执行电子邮件格式检查,因为我将应用程序连接到了MongoDB?任何示例或指导都将不胜感激。提前谢谢!大家在这里都提出了一些有价值的观点,你需要遵循几乎所有这些观点来验证数据。
无论如何,就目前而言,我认为以下方式是进行电子邮件验证的更好方式。
<input type="email" />
,这样浏览器可以为您验证电子邮件你可以像下面这样渲染输入框:
<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*验证库并使用它们来处理所有验证,您可以从这里使用电子邮件验证代码...或以任何您想要的方式进行验证。
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';
}
}
这可以使用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存储)。你的代码可能类似于以下内容:
<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(/.+@.+/);
}
这样就可以了
email.match(/.+@.+\..+/)
em@il@@email.#
这样的字符串,显然不是一个电子邮件。 - Daniel你可以使用 Joi 库,它非常简单并覆盖了表单的所有不同情况。https://www.npmjs.com/package/joi
你也可以在 TypeScript 中使用它。
这是一个简单的例子:
创建一个包含所有输入的模式。
schema = Joi.object({
name: Joi.string().required(),
email: Joi.string().email({ tlds: { allow: false } }).required()
});
const errors = schema.validate(YourInputClass, {
abortEarly: false,
stripUnknown: { objects: true },
});
errors
变量中,您应该找到一个包含错误对象
的对象,其中包含details
,用于描述所有相关错误消息,如果您的表单无效。