仅针对一个字段的引导表单验证

Question

我有一个简单的表单，它由一个电子邮件字段和密码字段组成，如下所示

          <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
        })
    }

但是当我开始输入电子邮件地址字段时，验证都会触发并显示红色边框。如何仅在用户开始输入电子邮件地址时触发电子邮件地址的引导验证。

Answer 1

你应该试试这个 bootstrap 表单和一些 js，不要忘记包含 Bootstrap css。

<.link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">

(function() {
			'use strict';
			window.addEventListener('load', function() {
			var forms = document.getElementsByClassName('f-validation');
			var validation = Array.prototype.filter.call(forms, function(form) {
			form.addEventListener('submit', function(event) {
			if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
			}
			form.classList.add('was-validated');
			}, false);
			});
			}, false);
			})();

<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">


			<div class="container mt-2">
				<form class="f-validation" novalidate>
					<div class="form-row">
						<div class="col-md-12 mb-3">
							<label for="validationCustomUsername">Email address</label>
							<div class="input-group">
								<input type="email" class="form-control" id="validationCustomUsername" placeholder="Username"
								aria-describedby="inputGroupPrepend" required>
								<div class="invalid-feedback">
									Please enter valid email id.
								</div>
							</div>
						</div>
					</div>
					<div class="form-row">
						<div class="col-md-12 mb-3">
							<label for="validationCustom03">Password</label>
							<input type="password" class="form-control" id="validationCustom03" placeholder="Password" required>
							<div class="invalid-feedback">
								Please enter password.
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="form-check">
							<input class="" type="checkbox" value="">
							<label class="">
								Remember me.
							</label>
						</div>
					</div>
					<button class="btn btn-primary btn-sm" type="submit">Submit form</button>
				</form>
			</div>