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

炎冰
  • 5
新手上路,请多包涵

例如在登录的时候,提交表单后后端返回用户名或密码错误的消息,在前端怎么更新到对应的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>
)

}

回复
阅读 1.4k
2 个回答
炎冰
  • 5
新手上路,请多包涵
✓ 已被采纳

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>

handleClick else

this.setState({
    errMsg: '密码错误',
    isDirty: true,
}, () => {
    this.form.doValidate();
})

render

<Input jsxrules={[
    {
        validator: (value) => {if (this.state.isDirty) {return false;} return true },
        errMsg: this.state.errMsg
    }
]} />
你知道吗?

宣传栏