堆栈内存溢出
  简体   繁体   English

电话号码验证功能出现问题

[英]Problem with phone number validation function

 原文  2019-03-18 03:30:39  5   3    javascript/ html/ validation

问题描述

Working on a simple registration form in Javascript and I can't quite figure out why my phone validation function isn't working. 使用Javascript处理简单的注册表格，我不太清楚为什么我的电话验证功能无法正常工作。 What I'm trying to do is 我想做的是

  1. Make the field optional. 将字段设为可选。 If the user doesn't put anything in the field, the form will still be valid and submit 如果用户未在字段中输入任何内容，则该表格仍然有效并提交

  2. If the user puts in a phone number, it must be in an XXX-XXX-XXXX format. 如果用户输入电话号码，则该电话号码必须为XXX-XXX-XXXX格式。

Any and all help is appreciated. 任何和所有帮助表示赞赏。

Here is my code 这是我的代码 

 function validateform() { var username = document.getElementById('username'); var password = document.getElementById('password'); var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var dob = document.getElementById('dob'); var email = document.getElementById('email'); var phone = document.getElementById('phone'); if (username.value.length < 8) { alert("Username must be at least 8 characters"); username.focus(); return false; } if (password.value.length < 8) { alert("Password must be at least 8 characters"); password.focus(); return false; } let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid() if (!isVaild) { alert("Date must be in MM/DD/YYYY format"); dob.focus(); return false; } } function validatePhone() { var num1 = document.getElementById('phone').value; if (num1 !== "" && !num1.match(/\\(\\d{2}\\)\\d{8}/)) { alert('That is not a correct telephone number format'); return false; } } function vailddatecheck(dateString) { var dateforvailidation = dateString.value; var isVaild = moment(dateforvailidation, 'MM/DD/YYYY', true).isVaild(); if (isVaild) { return true; } else { alert("Date must be in MM/DD/YYYY format"); form.dob.focus(); return false; } } 
 <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Totally Legit Registration Page</title> <link href="Mod4style.css" rel="stylesheet"> </head> <body> <form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()"> <input type="text" id="username" placeholder="User Name"> <p class="error"></p> <input type="password" id="password" placeholder="Password"> <p class="error"></p> <input type="firstname" id="firstname" placeholder="First Name"> <p class="error"></p> <input type="lastname" id="lastname" placeholder="Last Name"> <p class="error"></p> <input type="dob" id="dob" placeholder="Date of Birth"> <p class="error"></p> <input type="email" id="email" placeholder="Email"> <p class="error"></p> <input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();"> <p class="error"></p> <button type="Submit" onClick="">Submit</button> <button type="Reset">Reset</button> </form> <script <script src="formvalidation.js" charset="utf-8"></script> </body> <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script> </html>

3 个解决方案

解决方案1
 2  2019-03-18 03:46:14

The function validate validatePhone() will never be called due to 由于以下原因，永远不会调用validatePhone()函数： 

<input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();">

onsubmit will should be added to <form> and in the end of validateform add 应将onsubmit添加到<form>并在validateform的末尾添加 

return validatePhone()

And correct regex is following 和正确的正则表达式 

^(\d{3}-){2}\d{4}$

The last problem is using match() match always return array which is always trucy. 最后一个问题是使用match()匹配总是返回array ，该array总是不正确的。 Even Boolean([]) will be true . 甚至Boolean([])也将为true 。 So !num1.match(/\\(\\d{2}\\)\\d{8}/ will always be false . You should use RegExp.prototype.test . 因此!num1.match(/\\(\\d{2}\\)\\d{8}/始终为false 。您应该使用RegExp.prototype.test 。 

if (num1 !== "" && !/(\d{3}-){2}\d{4}/.test(num1))


 function validateform() { var username = document.getElementById('username'); var password = document.getElementById('password'); var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var dob = document.getElementById('dob'); var email = document.getElementById('email'); var phone = document.getElementById('phone'); if(username.value.length < 8){ alert("Username must be at least 8 characters"); username.focus(); return false; } if (password.value.length < 8) { alert("Password must be at least 8 characters"); password.focus(); return false; } let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid() if (!isVaild) { alert("Date must be in MM/DD/YYYY format"); dob.focus(); return false; } return validatePhone(); } function validatePhone() { console.log('x') var num1 = document.getElementById('phone').value; if (num1 !== "" && !/(\\d{3}-){2}\\d{4}/.test(num1)) { alert('That is not a correct telephone number format'); return false; } } function vailddatecheck(dateString) { var dateforvailidation = dateString.value; var isVaild = moment(dateforvailidation, 'MM/DD/YYYY' , true).isVaild(); if (isVaild) { return true; } else { alert("Date must be in MM/DD/YYYY format"); form.dob.focus(); return false; } } 
 <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Totally Legit Registration Page</title> <link href="Mod4style.css" rel="stylesheet"> </head> <body> <form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()"> <input type="text" id="username" placeholder="User Name"> <p class="error"></p> <input type="password" id="password" placeholder="Password"> <p class="error"></p> <input type="firstname" id="firstname" placeholder="First Name"> <p class="error"></p> <input type="lastname" id="lastname" placeholder="Last Name"> <p class="error"></p> <input type="dob" id="dob" placeholder="Date of Birth" > <p class="error"></p> <input type="email" id="email" placeholder="Email"> <p class="error"></p> <input type="phone" id="phone" placeholder="Phone Number"> <p class="error"></p> <button type="Submit" onClick="">Submit</button> <button type="Reset">Reset</button> </form> <script <script src="formvalidation.js" charset="utf-8"></script> </body> <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script> </html>

解决方案2
 0  2019-03-18 03:45:40

Your regex is incorrect. 您的正则表达式不正确。 Try /^\\d{3}-\\d{3}-\\d{4}$/ . 尝试/^\\d{3}-\\d{3}-\\d{4}$/ 。 The regex you provided will match any number of the format (##)######## 您提供的正则表达式将匹配任意数量的格式(##)########

解决方案3
 -3  2019-03-18 03:40:00

 function validateform() { var username = document.getElementById('username'); var password = document.getElementById('password'); var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var dob = document.getElementById('dob'); var email = document.getElementById('email'); var phone = document.getElementById('phone'); if (username.value.length < 8) { alert("Username must be at least 8 characters"); username.focus(); return false; } if (password.value.length < 8) { alert("Password must be at least 8 characters"); password.focus(); return false; } let isVaild = moment(dob.value, 'MM/DD/YYYY', true).isValid() if (!isVaild) { alert("Date must be in MM/DD/YYYY format"); dob.focus(); return false; } } function validatePhone() { var num1 = document.getElementById('phone').value; if (num1 !== "" || !num1.match(/\\(\\d{2}\\)\\d{8}/)) { alert('That is not a correct telephone number format'); return false; } } function vailddatecheck(dateString) { var dateforvailidation = dateString.value; var isVaild = moment(dateforvailidation, 'MM/DD/YYYY', true).isVaild(); if (isVaild) { return true; } else { alert("Date must be in MM/DD/YYYY format"); form.dob.focus(); return false; } } 
 <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Totally Legit Registration Page</title> <link href="Mod4style.css" rel="stylesheet"> </head> <body> <form class="submit.html" method="post" class="simpleForm" onsubmit="return validateform()"> <input type="text" id="username" placeholder="User Name"> <p class="error"></p> <input type="password" id="password" placeholder="Password"> <p class="error"></p> <input type="firstname" id="firstname" placeholder="First Name"> <p class="error"></p> <input type="lastname" id="lastname" placeholder="Last Name"> <p class="error"></p> <input type="dob" id="dob" placeholder="Date of Birth"> <p class="error"></p> <input type="email" id="email" placeholder="Email"> <p class="error"></p> <input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();"> <p class="error"></p> <button type="Submit" onClick="">Submit</button> <button type="Reset">Reset</button> </form> <script <script src="formvalidation.js" charset="utf-8"></script> </body> <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用正则表达式验证电话号码 - Validation of a phone number with a regex 带空格的电话号码验证 - Phone Number Validation With Spacing 电话号码验证Angularjs - Phone Number Validation Angularjs 电话号码 Javascript 验证 - Phone Number Javascript Validation jQuery中的电话号码验证 - Phone number validation in jquery JQuery电话号码验证 - JQuery Phone Number Validation "HTML 电话号码验证" - HTML phone number validation 澳大利亚电话号码验证 - Australian Phone Number Validation Javascript电话号码验证 - Javascript phone number validation Javascript电话号码验证 - Javascript phone number validation
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM