RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1439517
Accepted
Kolamik
Kolamik
Asked:2022-08-15 21:48:34 +0000 UTC2022-08-15 21:48:34 +0000 UTC 2022-08-15 21:48:34 +0000 UTC

js表单验证功能不起作用

  • 772

无法编写检查表单有效性的函数。如果所有 3 个字段都填写正确,则该函数应将电子邮件和密码输出到控制台。我创建了 3 个等于 false 的变量 a、b 和 c,并将它们按 1 构建到每个块中。条件中应该有错误的地方,我分配了值 false,并且一切正常 - 真实。然后我尝试做检查。如果所有 3 个字段 = true,则密码和邮件应显示在控制台中。但是由于某种原因,该功能不起作用。

请帮助我理解我错在哪里?

'use strict'

const emailChecker = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;


const errorIsOn = document.querySelector('#error');
const preheader = document.querySelector('#preheader');
const emailField = document.querySelector('#e-mail');
const btn = document.querySelector('#btn');
const password = document.querySelector('#password');
const errorpass = document.querySelector('#errorpass');
const errorpass2 = document.querySelector('#errorpass2');
const preheaderpass = document.querySelector('#preheaderpass');
const checkbox = document.querySelector('#box');
const errorpass3 = document.querySelector('#errorpass3');

let a = false;
let b = false;
let c = false;

function isEmailValid(value) {
  return emailChecker.test(value);
}

function onInput() {
  if (isEmailValid(emailField.value)) {
    emailField.style.borderColor = 'green';
    errorIsOn.style.display = 'none';
    preheader.style.color = 'black';
    a = true;
  } else {
    emailField.style.borderColor = 'red';
    errorIsOn.style.display = 'initial';
    preheader.style.color = 'red';
    a = false;
  }
}

emailField.addEventListener('keyup', onInput);


function passValidation() {
  if (password.value.length === 0) {
    password.style.borderColor = 'red';
    errorpass.style.display = 'initial';
    preheaderpass.style.color = 'red';
    errorpass2.style.display = 'none';
    b = false;
  } else if (password.value.length > 0 && password.value.length <= 8) {
    password.style.borderColor = 'red';
    errorpass2.style.display = 'initial';
    preheaderpass.style.color = 'red';
    b = false;
  } else {
    password.style.borderColor = 'green';
    errorpass.style.display = 'none';
    errorpass2.style.display = 'none';
    preheaderpass.style.color = 'black';
    return (password);
    b = true;
  }
}

password.addEventListener('keyup', passValidation);


function checkboxValid() {
  if (!checkbox.checked === false) {
    checkbox.style.borderColor = 'black';
    errorpass3.style.display = 'none';
    c = true;
  } else {
    checkbox.style.borderColor = 'red';
    errorpass3.style.display = 'initial';
    c = false;
  }
}

checkbox.addEventListener('click', checkboxValid);


function formValidation() {
  if (a === true && b === true && c === true) {
    console.log(emailField);
    console.log(password);
  } else {
    console.log('Поля не заполнены!')
  }
}

btn.addEventListener('click', formValidation);
body {
  max-width: 1440px;
  max-height: 769px;
  background-color: #1B2473;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
}

@media screen and (max-width:768px) {
  .body {
    max-width: 768px;
  }
}

.form {
  width: 600px;
  height: 412px;
  background: #FFFFFF;
  box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 82px;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  .form {
    width: 728px;
    height: 697px;
  }
}

.form__preheader {
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  color: #787878;
  margin-left: 45px;
  margin-bottom: 7px;
}

@media screen and (max-width:768px) {
  .form__preheader {
    font-size: 24px;
  }
}

.form__header {
  width: 115px;
  height: 50px;
  font-weight: 700;
  font-size: 50px;
  line-height: 50px;
  color: #787878;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  margin-top: 26px;
}

@media screen and (max-width:768px) {
  .form__header {
    width: 138px;
    font-size: 60px;
  }
}

.form__field {
  width: 509px;
  height: 49px;
  background: #FFFFFF;
  border: 2px solid #787878;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  color: #CCCCCC;
}

@media screen and (max-width:768px) {
  .form__field {
    width: 638px;
    height: 49px;
  }
}

.form__error {
  display: none;
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  color: #CB2424;
  margin-left: 45px;
  margin-right: auto;
  margin-bottom: 12px;
}

.form__star {
  width: 7px;
  height: 12px;
  color: #787878;
}

.form__pc {
  width: 638px;
  height: fir-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.form__box {
  width: 24px;
  height: 24px;
  border: 2px solid #787878;
  border-radius: 7px;
  margin-left: 45px;
  margin-right: 10px;
}

@media screen and (max-width:768px) {
  .form__box {
    width: 32px;
    height: 32px;
  }
}

.form__checkbox {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.form__text {
  width: 278px;
  height: 16px;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #787878;
  margin-top: 3px;
}

@media screen and (max-width:768px) {
  .form__text {
    width: 358px;
    font-size: 18px;
  }
}

.form__send {
  width: 180px;
  height: 52px;
  background-color: #1A226B;
  border-radius: 10px;
  font-weight: 700;
  font-size: 24px;
  line-height: 16px;
  color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
  margin-top: 26px;
}

@media screen and (max-width:768px) {
  .form__send {
    width: 220px;
    height: 80px;
    font-size: 32px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../module_two_javascript/normalize.css">
  <link rel="stylesheet" href="../module_two_javascript/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <title>Form</title>
</head>

<body>

  <form class="form" id='form'>

    <h1 class="form__header">Вход</h1>
    <p class="form__preheader" id='preheader'>E-mail</p>
    <input class="form__field" type="text" id="e-mail" placeholder="Введите e-mail">
    <p class="form__error" id='error'>Поле обязательно для заполнения</p>
    <p class="form__preheader" id='preheaderpass'>Пароль</p>
    <input class="form__field" type="text" id="password" placeholder="Введите пароль">
    <p class="form__error" id='errorpass'>Поле обязательно для заполнения</p>
    <p class="form__error" id='errorpass2'>Пароль должен содержать как минимум 8 символов</p>

    <div class="form__pc">
      <div class=f orm__checkbox>
        <input class="form__box" type="checkbox" id="box" value='check'>
        <label for="box" class="form__text">Я согласен получать обновления на почту
        </label>
      </div>
      <p class="form__error" id='errorpass3'>Поле обязательно для заполнения</p>
    </div>

    <button class="form__send" id='btn' type="submit">
            Войти
    </button>
    <script src="..."></script>
</body>

</html>

javascript form
  • 2 2 个回答
  • 45 Views

2 个回答

  • Voted
  1. Andrey Semykin
    2022-08-15T23:21:22Z2022-08-15T23:21:22Z

    对 b 的赋值是在 return 之后,所以没有执行。

    'use strict'
    
    const emailChecker = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
    
    
    const errorIsOn = document.querySelector('#error');
    const preheader = document.querySelector('#preheader');
    const emailField = document.querySelector('#e-mail');
    const btn = document.querySelector('#btn');
    const password = document.querySelector('#password');
    const errorpass = document.querySelector('#errorpass');
    const errorpass2 = document.querySelector('#errorpass2');
    const preheaderpass = document.querySelector('#preheaderpass');
    const checkbox = document.querySelector('#box');
    const errorpass3 = document.querySelector('#errorpass3');
    
    let a = false;
    let b = false;
    let c = false;
    
    function isEmailValid(value) {
      return emailChecker.test(value);
    }
    
    function onInput() {
      if (isEmailValid(emailField.value)) {
        emailField.style.borderColor = 'green';
        errorIsOn.style.display = 'none';
        preheader.style.color = 'black';
        a = true;
      } else {
        emailField.style.borderColor = 'red';
        errorIsOn.style.display = 'initial';
        preheader.style.color = 'red';
        a = false;
      }
    }
    
    emailField.addEventListener('change', onInput);
    
    
    function passValidation() {
      if (password.value.length === 0) {
        password.style.borderColor = 'red';
        errorpass.style.display = 'initial';
        preheaderpass.style.color = 'red';
        errorpass2.style.display = 'none';
        b = false;
      } else if (password.value.length > 0 && password.value.length <= 8) {
        password.style.borderColor = 'red';
        errorpass2.style.display = 'initial';
        preheaderpass.style.color = 'red';
        b = false;
      } else {
        password.style.borderColor = 'green';
        errorpass.style.display = 'none';
        errorpass2.style.display = 'none';
        preheaderpass.style.color = 'black';
        b = true; // стояло ПОСЛЕ return
        return (password);
    
      }
    }
    
    password.addEventListener('change', passValidation);
    
    
    function checkboxValid() {
      if (!checkbox.checked === false) {
        checkbox.style.borderColor = 'black';
        errorpass3.style.display = 'none';
        c = true;
      } else {
        checkbox.style.borderColor = 'red';
        errorpass3.style.display = 'initial';
        c = false;
      }
    }
    
    checkbox.addEventListener('click', checkboxValid);
    
    
    function formValidation() {
      if (a === true && b === true && c === true) {
        console.log(emailField.value);
        console.log(password.value);
      } else {
        console.log('Поля не заполнены!')
      }
    }
    
    btn.addEventListener('click', formValidation);
    body {
      max-width: 1440px;
      max-height: 769px;
      background-color: #1B2473;
      display: flex;
      flex-direction: column;
      font-family: 'Roboto', sans-serif;
    }
    
    @media screen and (max-width:768px) {
      .body {
        max-width: 768px;
      }
    }
    
    .form {
      width: 600px;
      height: 412px;
      background: #FFFFFF;
      box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
      border-radius: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 82px;
      display: flex;
      flex-direction: column;
    }
    
    @media screen and (max-width: 768px) {
      .form {
        width: 728px;
        height: 697px;
      }
    }
    
    .form__preheader {
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      color: #787878;
      margin-left: 45px;
      margin-bottom: 7px;
    }
    
    @media screen and (max-width:768px) {
      .form__preheader {
        font-size: 24px;
      }
    }
    
    .form__header {
      width: 115px;
      height: 50px;
      font-weight: 700;
      font-size: 50px;
      line-height: 50px;
      color: #787878;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0px;
      margin-top: 26px;
    }
    
    @media screen and (max-width:768px) {
      .form__header {
        width: 138px;
        font-size: 60px;
      }
    }
    
    .form__field {
      width: 509px;
      height: 49px;
      background: #FFFFFF;
      border: 2px solid #787878;
      border-radius: 10px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0px;
      font-weight: 700;
      font-size: 28px;
      line-height: 36px;
      color: #CCCCCC;
    }
    
    @media screen and (max-width:768px) {
      .form__field {
        width: 638px;
        height: 49px;
      }
    }
    
    .form__error {
      display: none;
      font-weight: 500;
      font-size: 10px;
      line-height: 16px;
      color: #CB2424;
      margin-left: 45px;
      margin-right: auto;
      margin-bottom: 12px;
    }
    
    .form__star {
      width: 7px;
      height: 12px;
      color: #787878;
    }
    
    .form__pc {
      width: 638px;
      height: fir-content;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    
    .form__box {
      width: 24px;
      height: 24px;
      border: 2px solid #787878;
      border-radius: 7px;
      margin-left: 45px;
      margin-right: 10px;
    }
    
    @media screen and (max-width:768px) {
      .form__box {
        width: 32px;
        height: 32px;
      }
    }
    
    .form__checkbox {
      width: 100%;
      display: flex;
      flex-direction: row;
    }
    
    .form__text {
      width: 278px;
      height: 16px;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: #787878;
      margin-top: 3px;
    }
    
    @media screen and (max-width:768px) {
      .form__text {
        width: 358px;
        font-size: 18px;
      }
    }
    
    .form__send {
      width: 180px;
      height: 52px;
      background-color: #1A226B;
      border-radius: 10px;
      font-weight: 700;
      font-size: 24px;
      line-height: 16px;
      color: #FFFFFF;
      margin-left: auto;
      margin-right: auto;
      margin-top: 26px;
    }
    
    @media screen and (max-width:768px) {
      .form__send {
        width: 220px;
        height: 80px;
        font-size: 32px;
      }
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="../module_two_javascript/normalize.css">
      <link rel="stylesheet" href="../module_two_javascript/style.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
      <title>Form</title>
    </head>
    
    <body>
    
      <form class="form" id='form'>
    
        <h1 class="form__header">Вход</h1>
        <p class="form__preheader" id='preheader'>E-mail</p>
        <input class="form__field" type="text" id="e-mail" placeholder="Введите e-mail">
        <p class="form__error" id='error'>Поле обязательно для заполнения</p>
        <p class="form__preheader" id='preheaderpass'>Пароль</p>
        <input class="form__field" type="text" id="password" placeholder="Введите пароль">
        <p class="form__error" id='errorpass'>Поле обязательно для заполнения</p>
        <p class="form__error" id='errorpass2'>Пароль должен содержать как минимум 8 символов</p>
    
        <div class="form__pc">
          <div class=f orm__checkbox>
            <input class="form__box" type="checkbox" id="box" value='check'>
            <label for="box" class="form__text">Я согласен получать обновления на почту
            </label>
          </div>
          <p class="form__error" id='errorpass3'>Поле обязательно для заполнения</p>
        </div>
    
        <button class="form__send" id='btn' type="submit">
                Войти
        </button>
        <script src="..."></script>
    </body>
    
    </html>

    • 1
  2. Best Answer
    Kolamik
    2022-08-18T00:57:02Z2022-08-18T00:57:02Z

    最后我解决了这样的问题:

    JS:

    function formValidation(evt) { 
    
      if (a === true && b === true && c === true) {
    
        evt.preventDefault();  // добавила отмену события по умолчанию и только затем вывела в консоль нужные мне значения полей.
    
        console.log(emailField.value);
        console.log(password.value);
      } 
    }
    
    
    btn.addEventListener('click', formValidation);
    
    • 0

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5