如何验证手机号码在Bootstrap 4中使用约束验证？

Question

Here is the code that I have used to create a form. 这是我用来创建表单的代码。 Basically, I need to validate mobile number on the clients'-side using constraint validation. 基本上，我需要使用约束验证来在客户端验证手机号码。 Also, the error message should be displayed at the time the user inputs data. 另外，用户输入数据时应显示错误消息。 I have used mdboostrap. 我用过mdboostrap。 The oninput="check(this)" calls the function. oninput="check(this)"调用该函数。 I need the no. 我需要没有 of digits to be equal to 10. Here's a codepen for editing . 的数字等于10。这是用于编辑的代码笔。

https://codepen.io/aditya-jangid/pen/PxwNRV . https://codepen.io/aditya-jangid/pen/PxwNRV 。

function check(input) {

    }

I need to write the function as above. 我需要如上所述编写函数。

Answer 1

You can add a pattern attribute to get the no. 您可以添加pattern属性以获取no。 of digits to be equal to 10 的位数等于10

<input type="tel" pattern=".{10}" class="form-control" id="validationCustom08" placeholder="Mobile" oninput="check(this)" required>

On the snippet I added a function that helps validate the value of the phone input. 在代码段中，我添加了一个有助于验证电话输入值的功能。 I will still recomend you to use pattern atribute. 我仍然建议您使用pattern归因。 But this is a work around. 但这是一种解决方法。

 // 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)(?=.*[az])(?=.*[AZ])(?!.*\\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>

Hope this helps 希望这可以帮助

Answer 2

To correctly match a uk phone number then you need to amend the pattern to something a little more complex: 要正确匹配英国的电话号码，则需要将模式修改为更复杂的内容：

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

如何验证手机号码在Bootstrap 4中使用约束验证？

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-11-04 19:33:43

解决方案2
0 2019-10-24 19:00:16

如何验证手机号码 在Bootstrap 4中使用约束验证？

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-11-04 19:33:43

解决方案2 0 2019-10-24 19:00:16

如何验证手机号码在Bootstrap 4中使用约束验证？

解决方案1
1 已采纳 2018-11-04 19:33:43

解决方案2
0 2019-10-24 19:00:16