使用 Javascript 驗證電話號碼
[英]Validating Phone Numbers Using Javascript
問題描述
我正在處理一個包含多個字段和一個提交按鈕的 Web 表單。 單擊按鈕時，我必須驗證所需的文本框是否已填寫以及電話號碼格式是否正確。 我只能接受 7 位或 10 位電話號碼，但可以接受 (,)、(-) 等字符。 如果此框為空或電話號碼格式不正確（不是 7 或 10 個數字，不是數字）或已留空，我必須在文本框周圍添加紅色邊框。 該邊界應該保持原位，直到用戶糾正錯誤。
我無法讓它正常工作。 我嘗試了幾種不同的方法來執行此操作，但遇到了幾種不同類型的錯誤。 一種方法似乎有效，但紅色邊框只顯示一秒鍾然后消失，文本框中的值被重置。
這是我的代碼和我創建的 jsfiddle 的鏈接：
Javascript：
<script type="text/javascript">
function validateForm() {
return checkPhone();
}
function checkPhone() {
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(phone.value.match(phoneNum)) {
return true;
}
else {
document.getElementById("phone").className = document.getElementById("phone").className + " error";
return false;
}
}
</script>
HTML：
<form name="myForm" onsubmit = "return validateForm()">
Phone Number: <input type="text" id="phone"><br>
</form>
JSFiddle：
10 個解決方案
解決方案1
11 已采納 2014-10-06 07:19:58
至於你的正則表達式，我想應該是
^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}
但總的來說，這個假設是不正確的，因為人們可能會輸入諸如 ++44 20 1234 56789 或 +44 (0) 1234 567890 之類的東西，最好這樣做
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) { return true; }
這將確保輸入的值有 7 到 10 個數字，但格式是什么。 但是您必須考慮數字的最大長度可能超過 10，如上例所示。
解決方案2
7 2016-03-12 18:29:41
function telephoneCheck(str) { var a = /^(1\\s|1|)?((\\(\\d{3}\\))|\\d{3})(\\-|\\s)?(\\d{3})(\\-|\\s)?(\\d{4})$/.test(str); alert(a); } telephoneCheck("(555) 555-5555");
其中 str 可以是以下任何一種格式： 555-555-5555 (555)555-5555 (555) 555-5555 555 555 5555 5555555555 1 555 555 5555
解決方案3
5 2017-06-01 13:12:03
試試這個我正在工作。
<form> <input type="text" name="mobile" pattern="[1-9]{1}[0-9]{9}" title="Enter 10 digit mobile number" placeholder="Mobile number" required> <button> Save </button> </form>
解決方案4
1 2018-10-10 10:12:42
<html>
<title>Practice Session</title>
<body>
<form name="RegForm" onsubmit="return validate()" method="post">
<p>Name: <input type="text" name="Name"> </p><br>
<p>Contact: <input type="text" name="Telephone"> </p><br>
<p><input type="submit" value="send" name="Submit"></p>
</form>
</body>
<script>
function validate()
{
var name = document.forms["RegForm"]["Name"];
var phone = document.forms["RegForm"]["Telephone"];
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
else if(isNaN(name.value) /*"%d[10]"*/)
{
alert("name confirmed");
}
else{
window.alert("please enter character");
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
else if(!isNaN(phone.value) /*phone.value == isNaN(phone.value)*/)
{
alert("number confirmed");
}
else{
window.alert("please enter numbers only");
}
}
</script>
</html>
解決方案5
1 2019-03-28 14:18:40
看到太多邊緣情況后，我進行了更簡單的檢查：
^(([0-9\ \+\_\-\,\.\^\*\?\$\^\#\(\)])|(ext|x)){1,20}$
可能要指出的第一件事是允許重復“ext”，但此正則表達式的目的是防止用戶意外輸入電子郵件 ID 等而不是電話號碼，它確實做到了。
解決方案6
1 2020-07-10 03:26:53
在java腳本中使用正則表達式驗證電話號碼。
在印度，電話是 10 位數字，起始數字是 6、7、8 和 9。
Javascript 和 HTML 代碼：
function validate() { var text = document.getElementById("pno").value; var regx = /^[6-9]\\d{9}$/ ; if(regx.test(text)) alert("valid"); else alert("invalid"); }
<html> <head> <title>JS compiler - knox97</title> </head> <body> <input id="pno" placeholder="phonenumber" type="tel" maxlength="10" > </br></br> <button onclick="validate()" type="button">submit</button> </body> </html>
解決方案7
0 2016-07-12 12:43:25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Homepage-30-06-2016/Css.css" >
<title>Form</title>
<script type="text/javascript">
function isChar(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 47 && charCode < 58) {
document.getElementById("error").innerHTML = "*Please Enter Your Name Only";
document.getElementById("fullname").focus();
document.getElementById("fullname").style.borderColor = 'red';
return false;
}
else {
document.getElementById("error").innerHTML = "";
document.getElementById("fullname").style.borderColor = '';
return true;
}
}
</script>
</head>
<body>
<h1 style="margin-left:20px;"Registration Form>Registration Form</h1><hr/>
Name: <input id="fullname" type="text" placeholder="Full Name*"
name="fullname" onKeyPress="return isChar(event)" onChange="return isChar(event);"/><label id="error"></label><br /><br />
<button type="submit" id="submit" name="submit" onClick="return valid(event)" class="btn btn-link text-uppercase"> Submit now</button>
解決方案8
0 2019-01-30 17:48:21
您可以參考以下站點以了解電話號碼驗證
https://www.w3resource.com/javascript/form/non-empty-field.php
解決方案9
0 2021-10-27 09:24:42
HTML
<input type='text' onChange={phonNumValidation(e)}
placeholder='Enter phone number...' id='phone_num' />
爪哇腳本
它只允許使用數字，不允許使用 + 符號和 e，以及字符串和正則表達式
phonNumValidation = (e)=>{
e.target.value = e.target.value.replace(/[^0-9 ]/g, "").replace(" ","")
}
解決方案10
-1 2020-06-21 12:50:18
<!DOCTYPE html>
<html>
<head>
<style>
.container__1{
max-width: 450px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.container__1 label{
display: block;
margin-bottom: 10px;
}
.container__1 label > span{
float: left;
width: 100px;
color: #F072A9;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
}
.container__1 fieldset{
border-radius: 10px;
-webkit-border-radious:10px;
-moz-border-radoius: 10px;
margin: 0px 0px 0px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background:#FFF4F4 ;
box-shadow: inset 0px 0px 15px #FFE5E5;
}
.container__1 fieldset legend{
color: #FFA0C9;
border-top: 1px solid #FFD2D2 ;
border-left: 1px solid #FFD2D2 ;
border-right: 1px solid #FFD2D2 ;
border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 12px;
}
.container__1 textarea{
width: 250px;
height: 100px;
}.container__1 input[type=text],
.container__1 input[type=email],
.container__1 select{
border-radius: 3px;
border: 1px solid #FFC2DC;
outline: none;
color: #F072A9;
padding: 5px 8px 5px 8px;
box-shadow: inset 1px 1px 4px #FFD5E7;
background: #FFEFF6;
}
.container__1 input[type=submit],
.container__1 input[type=button]{
background: #EB3B88;
border: 1px solid #C94A81;
padding: 5px 15px 5px 15px;
color: #FFCBE2;
box-shadow: inset -1px -1px 3px #FF62A7;
border-radius: 3px;
font-weight: bold;
}
.required{
color: red;
}
</style>
</head>
<body>
<div class="container__1">
<form name="RegisterForm" onsubmit="return(SubmitClick())">
<fieldset>
<legend>Personal</legend>
<label for="field1"><span >Name<span class="required">*</span><input id="name" type="text" class="input-field" name="Name" value=""</label>
<label for="field2"><span >Email<span class="required">*</span><input placeholder="Ex: csa123@yahoo.in" id="email" type="email" class="input-field" name="Email" value=""</label>
<label for="field3"><span >Phone<span class="required">*</span><input placeholder="+919853004369" id="mobile" type="text" class="input-field" name="Mobile" value=""</label>
<label for="field4">
<span>Subject</span>
<select name="subject" id="subject" class="select-field">
<option value="none">Choose Your Sub..</option>
<option value="Appointment">Appiontment</option>
<option value="Interview">Interview</option>
<option value="Regarding a post">Regarding a post</option>
</select>
</label>
<label><span></span><input type="submit" ></label>
</fieldset>
</form>
</div>
</body>
<script>
function SubmitClick(){
_name = document.querySelector('#name').value;
_email = document.querySelector('#email').value;
_mobile = document.querySelector('#mobile').value;
_subject = document.querySelector('#subject').value;
if(_name == '' || _name == null ){
alert('Enter Your Name');
document.RegisterForm.Name.focus();
return false;
}
var atPos = _email.indexOf('@');
var dotPos = _email.lastIndexOf('.');
if(_email == '' || atPos<1 || (dotPos - atPos)<2){
alert('Provide Your Correct Email address');
document.RegisterForm.Email.focus();
return false;
}
var regExp = /^\+91[0-9]{10}$/;
if(_mobile == '' || !regExp.test(_mobile)){
alert('Please Provide your Mobile number as Ex:- +919853004369');
document.RegisterForm.Mobile.focus();
return false;
}
if(_subject == 'none'){
alert('Please choose a subject');
document.RegisterForm.subject.focus();
return false;
}else{
alert (`success!!!:--'\n'Name:${_name},'\n' Mobile: ${_mobile},'\n' Email:${_email},'\n' Subject:${_subject},`)
}
}
</script>
</html>
解決方案11
-2 2017-12-13 10:06:17
if (charCode > 47 && charCode < 58) {
document.getElementById("error").innerHTML = "*Please Enter Your Name Only";
document.getElementById("fullname").focus();
document.getElementById("fullname").style.borderColor = 'red';
return false;
} else {
document.getElementById("error").innerHTML = "";
document.getElementById("fullname").style.borderColor = '';
return true;
}
使用 nintex 表單中的 javascript 驗證電子郵件地址、電話、ID 號
[英]Validating Email Address,Phone,ID Number using javascript in nintex forms
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.