如何驗證手機號碼 在Bootstrap 4中使用約束驗證？
[英]How do I validate Mobile no. in Bootstrap 4 using constraint validation?
問題描述
這是我用來創建表單的代碼。 基本上，我需要使用約束驗證來在客戶端驗證手機號碼。 另外，用戶輸入數據時應顯示錯誤消息。 我用過mdboostrap。 oninput="check(this)"調用該函數。 我需要沒有 的數字等於10。這是用於編輯的代碼筆。
https://codepen.io/aditya-jangid/pen/PxwNRV 。
function check(input) {
}
我需要如上所述編寫函數。
2 個解決方案
解決方案1
1 已采納 2018-11-04 19:33:43
您可以添加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)(?=.*[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>
希望這可以幫助
解決方案2
0 2019-10-24 19:00:16
要正確匹配英國的電話號碼，則需要將模式修改為更復雜的內容：
<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>
如何復制引導程序移動導航欄切換（不使用引導程序）？
[英]How do I replicate the bootstrap mobile navbar toggle (without using bootstrap)?
我如何驗證不使用 jquery 在 textarea 的描述字段中輸入手機號碼
[英]how can i validate to do not enter mobile number in description field of textarea using jquery
如何在本機驗證事件流中調用自定義約束驗證？
[英]How do I invoke custom constraint validation as part of the native validation event flow?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.