时间戳

首页 > 解决方案 > 电话号码验证功能问题

javascript - 电话号码验证功能问题

问题描述

在 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>

标签： javascripthtmlvalidation

解决方案

函数 validatevalidatePhone()将永远不会被调用，因为

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

onsubmitwill 应该添加到 add<form>的末尾validateform

return validatePhone()

正确的正则表达式如下

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

最后一个问题是使用match()match 总是返回array，它总是 trucy。甚至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>

推荐阅读