how does react ant use custom form validation?
1. Code
const Login = (
{
loading,
dispatch,
form: {
getFieldDecorator,
validateFieldsAndScroll
},
}
) => {
function handleOk() {
validateFieldsAndScroll((errors, values) => {
if (errors) {
console.log(`${errors}`);
return
}
dispatch({type: "login/login", payload: values}) //models
});
}
return (
<div className={styles.form}>
<div className={styles.logo}>
<img alt="logo" src={logo_img}/>
<span>Light of Hope</span>
</div>
<form>
<FormItem hasFeedback>
{getFieldDecorator("username", {
rules: [
{
required: true,
message:""
}
],
// initialValue: "admin", //
})(<Input prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)", fontSize:16 }} />} onPressEnter={handleOk} placeholder=""/>)}
</FormItem>
<FormItem hasFeedback>
{getFieldDecorator("password", {
rules: [
{
required: true,
message:""
},
{
validator(rule, values, callback){
if(rule&&values.length>0){
console.log("")
}else{
callback(
console.log("")
);
}
}
}
],
// initialValue: "123456",//
})(<Input prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" , fontSize:16}} />} type="password" onPressEnter={handleOk} placeholder=""/>)}
</FormItem>
<Row>
<Button type="primary" onClick={handleOk} loading={loading.effects.login}>
</Button>
<span>Username:admin</span>
<span>Password:123456</span>
</Row>
</form>
</div>
)
};
2. For example: what should I do if I want to verify that the password must be greater than 6 digits and contain at least one letter? Checked on the Internet and said that you can use validator to achieve custom verification, but I am a little new as a react is not very good at it, please, you can give me a lot of advice!