这是我用来创建表单的代码。
基本上，我需要使用约束验证来在客户端验证手机号码。另外，用户输入数据时应显示错误消息。
我用过mdboostrap。
oninput="check(this)"调用该函数。
我需要没有的位数等于10。
这是用于编辑的codepen。
https://codepen.io/aditya-jangid/pen/PxwNRV。
function check(input) {
}
我需要如上所述编写函数。
答案 0 :(得分：1)
您可以添加pattern属性以获取no。的位数等于10
<input type="tel" pattern=".{10}" class="form-control" id="validationCustom08" placeholder="Mobile" oninput="check(this)" required>
在代码段中，我添加了一个有助于验证电话输入值的功能。我仍然建议您使用pattern属性。但这是一种解决方法。
// Starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
var tel = document.querySelector('input[type="tel"]');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
if(!check(tel.value)){
event.preventDefault();
event.stopPropagation();
alert('error on phone')
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
function check(input) {
if(input.length != 10)
return false;
return true;
}.wrapper {
margin: 5% auto;
background-color: #FFF;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px -2px rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.2);
padding: 20px;
max-width: 600px;
}
body {
background: url('http://www.baltana.com/files/wallpapers-5/Blue-Background-HQ-Desktop-Wallpaper-16270.jpg');
}<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/css/mdb.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="container">
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
This Field cannot be empty.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
This Field cannot be empty.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend"
required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="validationCustom03">Address</label>
<input type="textarea" class="form-control" id="validationCustom03" placeholder="Address" required>
<div class="invalid-feedback">
This field is required.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom04">City</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom05">State</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom06">Zip</label>
<input type="number" class="form-control" id="validationCustom06" placeholder="Zip" oninput="checkzip(this)"
required maxlength="6">
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom07">Country Code</label>
<select class="form-control" id="validationCustom07" required>
<option data-countryCode="IN" value="91">India (+91)</option>
<option disabled="disabled">Other Countries</option>
<option data-countryCode="US" value="1">USA (+1)</option>
<option data-countryCode="GB" value="44">UK (+44)</option>
</select>
<div class="invalid-feedback">
Please Select a valid option.
</div>
</div>
<div class="col-md-8 mb-3">
<label for="validationCustom08">Mobile</label>
<input type="tel" class="form-control" id="validationCustom08" placeholder="Mobile" oninput="check(this)"
required>
<div class="valid-feedback">
Looks Good!.
</div>
<div class="invalid-feedback">
Please provide a valid number.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom09">Gender</label>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="male" name="gender" checked>
<label class="custom-control-label" for="male">Male</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="female" name="gender">
<label class="custom-control-label" for="female">Female</label>
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom10">Password</label>
<input type="password" class="form-control" id="validationCustom10" placeholder="Password" required minlength="8"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$">
<div class="invalid-feedback">
Only numbers, Uppercase and Lowercase and Length greater than 8.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom11">Email</label>
<input type="email" class="form-control" id="validationCustom11" placeholder="Email" oninput="checkemail(this)"
required>
<div class="invalid-feedback">
Please Enter a valid email ID
</div>
</div>
</div>
<div class="form-group">
<div class="form-check pl-0">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/js/mdb.min.js"></script>
</body>
</html>
希望这会有所帮助
答案 1 :(得分：0)
要正确匹配英国的电话号码，则需要将模式修改为更复杂的内容：
<input type="tel" pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" class="form-control" id="Telephone"
aria-describedby="telephoneHelp" placeholder="Enter telephone" required>