Проблема с функцией проверки номера телефона - PullRequest
Новая
       3

Проблема с функцией проверки номера телефона

0 голосов
/ 18 марта 2019

Работаю над простой формой регистрации в 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 ]

2 голосов
/ 18 марта 2019

Функция validate validatePhone() никогда не будет вызвана из-за 

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

onsubmit будет добавлено к <form> и в конце validateform add 

return validatePhone()

И правильное регулярное выражение следует 

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

Последняя проблема заключается в использовании match() 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>
0 голосов
/ 18 марта 2019

Ваше регулярное выражение неверно.Попробуйте /^\d{3}-\d{3}-\d{4}$/.Предоставленное вами регулярное выражение будет соответствовать любому числу в формате (##)########

0 голосов
/ 18 марта 2019 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...