账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    antd的Form validator无效
    45
    0

    antd的Form validator无效,始终不能显示?代码如下。

    usernameCheck=(rule,value,callback)=>{

        if (value.length>6) {
            callback('have value');
        } else {
            callback('have value less than 6');
        }
    }

    render(){

     const { getFieldDecorator } = this.props.form;
     return (
         <Modal visible={this.props.visible} closable={false}
         footer={[
             <Button key="back" onClick={this.clickCancel}>游客浏览</Button>
         ]}>
         <Tabs activeKey={this.props.SonSignInorSignUp}>
             <TabPane tab="Sign In" key="1" >
                 <Form className="signin-form">
                     <FormItem label="UserName" ref="signin_username"  >
                         {getFieldDecorator('username', {
                             rules: [{
                                 required: true, message: 'Please input your username!'
                                }, {
                                 validator:this.usernameCheck,
                             }],
                         })
                         (<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }}/>} placeholder="Username" />
                         )}
                     </FormItem>
                     ...
                     }
    2
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 蜡笔大辛 普通会员 1楼

      在使用antd的Form组件时,如果其内置的validator校验无效,可能的原因有以下几点:

      1. 没有正确设置rules属性:每个需要校验的Form.Item都应该提供rules属性,例如: ```jsx <Form.Item name="username" rules={[ { required: true, message: '请输入用户名' }, { min: 6, max: 20, message: '长度在6到20个字符之间' }, ]}

        ```

      2. 忘记引入Form.Item:确保你在使用表单字段的时候,将其包裹在Form和Form.Item组件中。

      3. 验证规则设置不正确:请检查你的验证规则是否符合antd的要求,如required、min、max等都是有效的验证规则,自定义验证规则应返回一个Promise。

      4. 忘记调用validateFields方法:在需要触发验证的时候,你需要通过form实例调用validateFields方法。例如,在提交表单时: jsx <Button type="primary" onClick={() => { form.validateFields() .then(values => { console.log('Received values of form: ', values); }) .catch(errorInfo => { console.log('Errors in form: ', errorInfo); }); }}> 提交 </Button>

      5. 如果使用的是最新版antd,并且希望在输入时实时校验,可以开启Form的validateTrigger属性,例如: ```jsx

      {/* ... */}

      ```

      以上几点是常见的导致antd Form validator无效的原因,请根据实际情况进行排查。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部