react-07-4 Login Form表单验证

用户名/密码的合法性要求：

1）.必须输入

2）.必须大于4位

3）.必须小于12位

4）.必须是英文，数字或下划线组成

1 申明式验证

   以用户名为例

{getFieldDecorator('username',{     //配置对象：属性名是特定的一些名称
    //申明式验证：直接使用别人定义好的验证规则进行验证
    rules:[
        { required:true,message:'请输入用户名！'},
        { min:4,message:'用户名至少4位!'},
        { max:12,message:'用户名不能多余12位!'},
        { pattern:/^[a-zA-Z0-9_]+$/,message:'用户名必须是英文，数字或下划线组成!'}
        ],
    })(
    <Input
        prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
        placeholder="Username"
    />
)}

2 自定义验证

   1 以密码为例

{getFieldDecorator('password',{
    rules:[
        // { required:true,message:'Please input your password!'}
        {validator:this.validatePwd}
        ],
})(
    <Input
        prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
        type="password"
        placeholder="Password"
    />
)}

    2  实现方法

//对密码进行自定义验证
validatePwd = (rule, value, callback) => {
    /*callback必须被调用
    *   1 callback()    //验证通过
    *   2 callback('xxxxx')     //验证失败并指定提示的文本
    * */
    if(!value){ callback('密码必须输入')}
    else if(value.length < 4){callback('密码长度不能小于4位')}
    else if(value.length > 12){callback('密码长度不能超过12位')}
    else if(!/^[a-zA-Z0-9_]+$/.test(value)){callback('密码必须是英文，数字或下划线组成！')}
    else{callback()}
}

 

3 统一验证

     提交的时候进行统一验证

//实现方法
//第四步：取输入框中对应的值
handleSubmit = (event) =>{
    //阻止事件的默认行为,点击提交按钮不会默认提交
    event.preventDefault();

    //对所有的表单字段进行验证。自动获取values
    this.props.form.validateFields( (err, values) =>{
        //校验成功
        if(!err){
            console.log('提交ajax请求',values);
        }else{
            console.log('提交失败');
        }
    })

    //
    // //如何手动得到form对象
    // const form = this.props.form;
    // //获取表单项的输入数据
    // const values = form.getFieldsValue();
    // console.log(values);

}