电话号码验证功能存在问题

时间：2019-03-18 03:30:40

标签： javascript html validation

使用Javascript处理简单的注册表单，我不太清楚为什么我的电话验证功能无法正常工作。我想做的是

  1. 使该字段为可选。如果用户未在该字段中输入任何内容，则该表格仍然有效并提交

  2. 如果用户输入电话号码，则该电话号码必须为XXX-XXX-XXXX格式。

感谢您的帮助。

这是我的代码

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 个答案:

答案 0 :(得分：2)

由于

，将永远不会调用validate validatePhone()函数 
<input type="phone" id="phone" placeholder="Phone Number" onsubmit="return validatePhone();">

onsubmit将被添加到<form>并在validateform的末尾添加

return validatePhone()

正确的正则表达式紧随

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

最后一个问题是使用match()匹配总是返回array，这总是很不可靠。甚至Boolean([])也将是true。因此!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>

答案 1 :(得分：0)

您的正则表达式不正确。尝试/^\d{3}-\d{3}-\d{4}$/。 您提供的正则表达式将匹配任意数量的格式(##)########

答案 2 :(得分：-3)

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>

相关问题
最新问题