仅对一个字段进行Bootstrap表单验证

i34xakig  于 2023-01-06  发布在  Bootstrap
关注(0)|答案(1)|浏览(129)

我有一个简单的表单,其中包括一个电子邮件字段和密码字段,如下所示

<Form noValidate validated={validated} onSubmit={this.handleSubmit}>

                    <Form.Group controlId="formEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" onChange={this.emailValidator} placeholder="Enter email" required />
                    </Form.Group>

                    <Form.Group controlId="formPassword">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password"placeholder="Password" required />
                    </Form.Group>

                    <Button type="submit" size="lg" variant="light">
                     Login
                    </Button>

         </Form>

我想包括引导形式验证的电子邮件字段时,用户开始键入电子邮件地址和验证的密码字段时,提交按钮被按下。
我的方法如下。

handleSubmit = event => {
        const { loggingUser } = this.props;
        const form = event.currentTarget;
        event.preventDefault();
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        } else {
            const loggingData = {
                "eMail": event.target.formEmail.value,
                "password": event.target.formPassword.value,
            }
            loggingUser(loggingData);
        }
        this.setState({
            validated: true
        })
    };

    emailValidator  = event =>{
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        }
        this.setState({
            validated: true
        })
    }

但是当我开始在email地址字段中输入时,两个验证都触发并显示红色边框。我怎么能只在用户开始输入email地址时才触发对email地址的引导验证呢?

9w11ddsr

9w11ddsr1#

你应该试试这个 Bootstrap 和一些js,不要忘记包括 Bootstrap css。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

x一个一个一个一个x一个一个二个x

相关问题