我在react中进行了一些表单验证，我可以在一个函数中使用我的状态中的一些全局变量来进行表单验证吗？有什么方法可以让它保持简单，并且仍然为每个输入提供不同的条件？出了问题，我想得到一些帮助，我不想在电子邮件或任何东西中包含regexp模式。。谢谢大家！
注册.js
import React, { Component } from 'react'
export default class Registration extends Component {
state={
userName:'',
password:'',
email:'',
age:'',
backgroundColorInput:'white'
}
validLoginDetails=(item)=> {
locationOfS = email.indexOf('@');
this.setState({userName:item.target.value});
if(item.target.value.length>5 && item.target.value.length<9){
this.setState({backgroundColorInput:'green'})
}
this.setState({password:item.target.value});
if(item.target.value.length<7){
this.setState({backgroundColorInput:'red'})
}
this.setState({email:item.target.value});
if (item.target.value.locationOfS.indexOf(4) != -1) {
this.setState({backgroundColorInput:'green'} )
}
else{
this.setState({backgroundColorInput:'red'})
}
}
render() {
return (
<div>
<input placeholder='Enter your name' onChange={this.validLoginDetails} style={{backgroundColor: this.state.backgroundColorInput}} /><br/>
<input type='password' placeholder='Enter your a password' onChange={this.validLoginDetails} style={{backgroundColor: this.state.backgroundColorInput}} /><br/>
<input placeholder='Enter your Age' onChange={this.validLoginDetails} style={{backgroundColor: this.state.backgroundColorInput}} /><br/>
<input type="email" placeholder='Enter your Email' onChange={this.validLoginDetails} style={{backgroundColor: this.state.backgroundColorInput}} /><br/>
<button onClick={this.func}>submit</button>
</div>
)
}
}
App.js
import React from 'react';
import './App.css';
import Registration from './components/Registration.js';
import Main from './components/Main.js';
function App() {
return (
<div className="App">
<Registration/>
<Main/>
</div>
);
}
export default App;
以下是我最近遇到的一些问题和解决方案，希望能对您有所帮助。
最近我想用react创建一个注册页面。我需要一个库来帮助我管理表单状态并验证表单值。然后我选择了著名的"formik"+"Yup"。但经过一番尝试，我发现这不适合这份工作。
formik在任何字段值发生变化或模糊时验证每个字段。对于简单的验证来说，这不是什么大问题。但我需要通过网络检查用户名和电子邮件的可用性，这可能需要花费很多时间。检查时，会向用户显示旋转。因此验证不能由更改事件触发。另一方面，如果用户名已被检查并且没有更改，则不应再次检查。因为当用户不更改用户名字段时，他将不希望看到旋转。对于几乎所有的表单库，在提交之前都会触发验证。但对于那些已经验证但尚未更改的字段，不应触发验证。Formik很难达到的上述要求
最后我开发了自己的图书馆。它支持使用单独的触发器验证每个字段。总的来说，有三个触发器：更改、模糊和提交。
对于更改，当字段值发生更改时，将进行验证。对于模糊，情况会有点复杂。发生模糊时，如果字段已经有错误，并且该字段与上次验证相比没有更改，则不应再次验证该字段。如果字段没有错误，并且字段值与上次验证相比没有更改，则不应再次验证。如果该字段没有错误，但该字段已从上次验证更改，则应立即对其进行验证。对于提交，类似于"模糊"事件，当提交发生时，如果字段已经有错误，并且字段值与上次验证相比没有更改，则无需再次验证并终止提交。如果字段没有错误，并且字段值与上次验证相比没有更改，则该字段被视为已验证，无需重新验证。如果字段没有错误，并且字段值已从上次验证更改，则应重新启动验证任务。
有一个工作演示
这是的代码示例
import React from 'react';
import { createValidator, useForm, OnSubmitFunction, REG_SPECIAL, string, sameWithWhenExists } from 'powerful-form-hook';
export const Demo = () => {
const initialValues = React.useMemo(() => ({
userName: '',
email: '',
password: '',
conformedPassword: '',
age: '',
}), []);
const validate = React.useMemo(() => createValidator<typeof initialValues>({
userName: (value) => {
if (!value) throw 'User name is required.'
if (value.length > 5 && value.length < 9) throw 'The length of user name should longer than 5 and shortter than 9.'
},
password: [
string()
.required('Password is required.')
.composedOf('Password must be composed of upper and lower case letters, Numbers and special keyboard symbols', /[a-z]+/i, /d+/, REG_SPECIAL)
.matchSomeOf('The password must contain uppercase letters or special keyboard symbols', /[A-Z]+/, REG_SPECIAL)
.min(6, 'Password length must be greater than or equal to 6')
.max(24, 'Password length must be less than or equal to 24'),
// the validate task will trigger by blur of itself and conformedPassword field.
{
triggers: {
trigger: 'blur',
fields: ['conformedPassword'],
},
validate: sameWithWhenExists('conformedPassword', 'Enter the same password twice'),
},
],
conformedPassword: [
string('Password should be a string.'),
// the validate task will trigger by blur of itself and password field.
{
triggers: {
trigger: 'blur',
fields: ['password'],
},
validate: sameWithWhenExists('password', 'Enter the same password twice'),
},
],
age: string().matchSomeOf(/d+/)
// same as userName.
email: [
string().required('Email is required.').trimmed('Email can not start or end with space.'),
],
}), []);
// Only when validate successful, the form submit. And if some validate task is running in the background or the form is submitting, the form will not be sumbited.
const onSubmit: OnSubmitFunction<typeof initialValues> = React.useCallback(async (values: typeof initialValues) => {
alert('submit successful');
}, []);
// handleChanges accept both event and value. For default, handleChanges will extract the value from event.target.value. For component like CheckBox which accept checked, use handleChanges[field].checked.
const { errors, values, handleChanges, handleBlurs, handleSubmit, submitting, validating } = useForm({
initialValues,
validate,
onSubmit,
});
return (
<form onSubmit={handleSubmit} noValidate>
<div>
<input placeholder='Enter your name' onChange={handleChanges.userName} onBlur={handleBlurs.userName} />
{ errors.userName.error ? errors.userName.message : null }
</div>
<div>
<input type='password' placeholder='Enter your a password' onChange={handleChanges.password} onBlur={handleBlurs.password} />
{ errors.password.error ? errors.password.message : null }
</div>
<div>
<input type='password' placeholder='Conform your a password' onChange={handleChanges.conformedPassword} onBlur={handleBlurs.conformedPassword} />
{ errors.conformedPassword.error ? errors.conformedPassword.message : null }
</div>
<div>
<input placeholder='Enter your Age' onChange={handleChanges.age} onBlur={handleBlurs.age} />
{ errors.age.error ? errors.age.message : null }
</div>
<div>
<input type="email" placeholder='Enter your Email' onChange={handleChanges.email} onBlur={handleBlurs.email} />
{ errors.email.error ? errors.email.message : null }
</div>
<button type="submit">submit</button>
{ submitting ? 'Submitting...' : validating ? 'Validating...' : null }
</form>
)
}