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

您应该尝试使用此引导程序表单和一些js，并且不要忘记包括Bootstrap CSS。

<。link rel =“ stylesheet” href =“ https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”完整性=“ sha384-ggOyR0iXCbMQv3Xipma34MD + dH / 1fQ784 / j6cY / iJTQUOhcWr7x9JvoRxT2MZw1T“ 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>

Bootstrap表单验证仅用于一个字段

1 个答案: