我正在使用引导程序4,并使用以下代码替换错误消息。
<input type="text" pattern="[1-9]{1}[0-9]{3}" maxlength="4" class="form-control" placeholder="Enter User No." required oninvalid="this.setCustomValidity('Please enter valid User No.')" oninput="setCustomValidity('')">
但是我遇到了三个错误。
我想要的。
.jumbotron-m-color {
border-radius: 0;
background-color: #e8e4db;
width: 100%;
height: 80vh;
background-image: linear-gradient(to top, #a6c1ee 0%, #fbc2eb 100%);
}
.form-container {
position: absolute;
top: 15vh;
padding: 30px;
border: 1px solid whitesmoke;
border-radius: 0.25rem;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
background-color: #f4fdfd;
}
<div class="jumbotron-m-color container-fluid ">
<div class="row justify-content-center">
<div class="col-12 col-sm-6 col-md-3">
<form id="Login-form" class="form-container">
<div class="form-group">
<label for="exampleInputEmail1">User No.</label>
<input type="text" pattern="[1-9]{1}[0-9]{5}" maxlength="6" class="form-control" placeholder="Enter User No." required oninvalid="this.setCustomValidity('Please enter valid User No.')" oninput="setCustomValidity('')">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group form-check">
<span>
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1" style="font-size:small;">Remember me</label>
</span>
</div>
<button type="submit" class="btn btn-color btn-block">Submit</button>
</form>
</div>
</div>