请问 在uxcore中 如何更新validate的状态和错误Msg

问题描述

问 题

例如在登录的时候，提交表单后后端返回用户名或密码错误的消息，在前端怎么更新到对应的input验证错误消息上

constructor(props) {

super(props);
this.state = {};

this.handleClick = this.handleClick.bind(this);

}

saveRef(refName) {

const me = this;
return (c) => {
    me[refName] = c;
};

}

handleClick() {

let _this = this;
let formValues = this.form.getValues();
if (formValues.pass) {
    Request
        .post(ctp + '/login')
        .type('form')
        .send(formValues.values)
        .set('X-CSRF-TOKEN', csrf)
        .end(function (err, res) {
            if (err) {
                //do something
            } else {
                // if (1 == res.body.code) {
               //  例如： 密码错误， 该怎么把错误消息给pwd input
                // 此处该如何写，才能够使 pwd input 验证失效
                // }
            }
        })
}

}

render() {

let me = this;
return (
    <div className="kuma-container-full">
        <div className="login">
            <style>
                {".required {font-family:Simsun} " +
                ".login-form {width: 532px;width: 532px;margin: auto;top: 100px;position: relative;}"}
            </style>
            <Form ref={this.saveRef('form')} className="login-form" instantValidate={false}>
                <Input jsxname="usr" jsxlabel="用户名" autoTrim="true" jsxplaceholder="请输入用户名"
                       required={true}
                       jsxrules={[
                           {validator: Validators.isNotEmpty, errMsg: "用户名不能为空"}]}/>
                <Input jsxname="pwd" jsxlabel="密码" inputType="password" autoTrim="true"
                       jsxplaceholder="请输入密码"
                       required={true}
                       jsxrules={[
                           {validator: Validators.isNotEmpty, errMsg: "密码不能为空"}]}/>
                <Other>
                    <Button style={{marginLeft: '88px'}} onClick={this.handleClick}>登录</Button>
                </Other>
            </Form>
        </div>
    </div>
)

}

解决方案

handleClick else

let codeToField = {

2: 'usr',
1: 'pwd'

};

_this.setState({

errMsg: res.body.msg,
isDirty: true,
field: codeToField[res.body.code]

}, () => {

_this.form.doValidate();

})

// 必须设置state isDirty false 否则 在改变input值时会一直提示这个错误
_this.setState({

errMsg: '',
isDirty: false,
field: codeToField[res.body.code],
submit: false,

})

Form：

<Form ref={this.saveRef('form')} className="login-form">

<Input jsxname="usr" jsxlabel="用户名" autoTrim="true" jsxplaceholder="请输入用户名"
       required={true}
       jsxrules={[
           {validator: Validators.isNotEmpty, errMsg: "用户名不能为空"},
           {
               validator: (value) => {
                   if (this.state.field === 'usr' && this.state.isDirty) {
                       return false;
                   }
                   return true
               }, errMsg: this.state.errMsg
           }]}/>
<Input jsxname="pwd" jsxlabel="密码" inputType="password" autoTrim="true"
       jsxplaceholder="请输入密码"
       required={true}
       jsxrules={[
           {validator: Validators.isNotEmpty, errMsg: "密码不能为空"},
           {
               validator: (value) => {
                   if (this.state.field === 'pwd' && this.state.isDirty) {
                       return false;
                   }
                   return true
               }, errMsg: this.state.errMsg
           }]}/>
<Other>
    <Button style={{marginLeft: '88px'}} onClick={this.handleClick}>登录</Button>
</Other>

</Form>

这篇关于请问 在uxcore中 如何更新validate的状态和错误Msg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！