[英]Custom validation for phone number in JS
我正在嘗試在表單提交時添加電話驗證。 主要目標是:如果手機不是以“39”或“+39”開頭,請在號碼前添加此號碼並提交。 代碼是通過腳本管理器在 body 標簽之后添加的。 但它不適用於提交。 而且我在瀏覽器控制台中沒有任何錯誤。
<form action="some.php" method="POST">
<div class="fields">
<div class="lp-pom-form-field single-line-text" id="container_nome">
<label class="main lp-form-label" for="nome" id="label_nome" style="height: auto;">
<span class="label-style">Nome e Cognome *</span>
</label>
<input type="text" id="nome" name="nome" placeholder="" class="ub-input-item single text form_elem_nome">
</div>
<div class="lp-pom-form-field single-line-text" id="container_telefono">
<label class="main lp-form-label" for="telefono" id="label_telefono" style="height: auto;">
<span class="label-style">Telefono *</span>
</label>
<input type="text" id="telefono" name="telefono" placeholder="" class="ub-input-item single text form_elem_telefono">
</div>
</div>
</form>
window.onload = function() {
var mainForm = document.forms[0];
mainForm.addEventListener("submit", function validPhone() {
var re = /^\+?\d{1,3}?[- .]?\(?(?:\d{2,3})\)?[- .]?\d\d\d[- .]?\d\d\d\d$/;
var myPhone = '';
var element = document.getElementById('telefono');
if (element != null) {
myPhone = element.value;
}
else {
myPhone = null;
}
var myPhoneTrim = myPhone.trim().replace(/\s|\-|\(|\)/g, "");
var valid = re.test(myPhoneTrim);
if (myPhoneTrim.startsWith("39")) {
myPhoneTrim = "+" + myPhoneTrim;
} else if (!myPhoneTrim.startsWith("39") && !myPhoneTrim.startsWith("+39")) {
myPhoneTrim = "+39" + myPhoneTrim;
}
return valid;
});
}
嘗試使用string.match()
var matches = string.match(^39);
而不是if (myPhoneTrim.startsWith("39"))
和var matches = string.match(^[+]39);
但是,我認為您的初始代碼沒有問題。 你能把HTML貼出來嗎?
不確定您的 HTML 是什么樣子或您如何應用 JS 腳本,但在 JSFiddle 中運行它似乎沒問題: https ://jsfiddle.net/7u2h3nqn/17/
JS:
var mainForm = document.getElementById("lp-pom-button-205");
mainForm.addEventListener("click", function validPhone() {
var re = /^\+?\d{1,3}?[- .]?\(?(?:\d{2,3})\)?[- .]?\d\d\d[- .]?\d\d\d\d$/;
var myPhone = '';
var element = document.getElementById('telefono');
if (element != null) {
myPhone = element.value;
}
else {
myPhone = null;
}
var myPhoneTrim = myPhone.trim().replace(/\s|\-|\(|\)/g, "");
var valid = re.test(myPhoneTrim);
if (myPhoneTrim.startsWith("39")) {
myPhoneTrim = "+" + myPhoneTrim;
} else if (!myPhoneTrim.startsWith("39") && !myPhoneTrim.startsWith("+39")) {
myPhoneTrim = "+39" + myPhoneTrim;
}
console.log(myPhoneTrim);
return valid;
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.