javascript - 寻找有关如何清理一些条件语句的建议
问题描述
在 React 中开发验证功能。我相当新,不想在学习时养成任何坏习惯,所以我正在寻找有关如何清理我在这里的代码块的建议。
该函数检查输入字段,如果它们为空,则将适当的消息附加到数组中。检查所有输入字段后,如果该数组为空,则继续提交表单。如果该数组包含错误消息,则该消息将显示在屏幕上(未显示)
validation = (event) => {
event.preventDefault();
let errors = []
const {firstName, lastName, emailAddress, password, confirmPassword} = {...this.state}
if(firstName.length === 0) errors.push('Please provide a value for First Name');
if(lastName.length === 0) errors.push('Please provide a value for Last Name');
if(password.length === 0){
errors.push('Please provide a value for Password');
}else if(password !== confirmPassword){
errors.push('Passwords do not match');
};
if(emailAddress.length === 0) {
errors.push('Please provide a value for Email Address');
}else if(!emailRegex.test(emailAddress)){
errors.push('Invalid email address');
};
this.setState({errors: errors})
if(errors.length === 0) this.logIn()
}
logIn = () => {
console.log('good to go')
};
如果可能的话,只是想办法清理我的条件语句!谢谢
解决方案
也许像下面这样就足够了。如果您提供通用错误消息(例如"Missing required value: <keyName>"
,而不是针对该字段的特定内容),则可以大大简化此操作。
您还需要进行手动检查以确保password
=== confirmPassword
,但我认为您将能够解决该问题。
const emailRegex = <your regex>;
const hasLength = val => val && val.length !== 0;
验证图
const validators = {
firstName: {
validate: hasLength,
message: 'Please provide a value for First Name'
},
lastName: {
validate: hasLength,
message: 'Please provide a value for Last Name'
},
password: {
validate: hasLength,
message: 'Please provide a value for Password'
},
emailAddress: [{
validate: hasLength,
message: 'Please provide a value for Email Address'
},
{
validate: val => !emailRegex.test(val),
message: 'Invalid email address'
}
],
}
验证器
validation = (event) => {
event.preventDefault();
let errors = []
const state = {...this.state};
Object
.keys(state)
.forEach(key => {
let validator = validators[key];
if (!validator) return;
if (!Array.isArray(validator)) {
validator = [validator]
}
validator.forEach(v => {
if (!v.validate(state[key])) {
errors.push(v.message)
}
})
});
this.setState({errors: errors})
if (errors.length === 0) this.logIn()
}
推荐阅读
- google-play - 存储在 Windows 上的 Google 服务帐户 .json 密钥
- go - 如何在 .proto 文件中正确导入 go 模型
- list - 如何在 SAPUI 中禁用 ListItem
- json - 我在 Swift 5 上解码 json 时出错
- php - 你如何销毁 2 行,laravel 中的每个表中的一个?
- android - Kotlin 编译器优化?
- python - Pyqt5如何每5分钟运行一次脚本或运行脚本以检查网络中的线程
- react-native - 如何找出在本机反应中可见的flatlist最后一项
- spring - 在分布式环境中获取访问令牌
- javascript - Nuxtjs 抛出“不要在突变处理程序之外改变 vuex 存储状态”