Question

请说明如何正确检查表格的验证。

我的问题是：当我输入输入“isValidateUser”变为true并且一切正常时，但是当我擦除输入中的所有字母时，“isValidateUser”仍然是真的。然后我尝试添加：

if(this.value == ""){
            isValidateUser = false;
        }

但是这样做了。当我删除所有字母“isValidateUser”变为false时，怎么可能做出来。

提前致谢！

var isValidateUser = false;
var userName = document.querySelector(".js-type-user");
var letterOnly = /^([a-zа-яё]+|)$/i;

userName.onchange = function () {
  if (letterOnly.test(this.value)) {
    isValidateUser = true;
  }
};

<form class="form__action" action="">
  <div class="form__user-name">
    <label class="form__label">Ваше имя:</label>
    <input type="text" class="form__input js-type-user">
  </div>
  <div class="form__user-mail">
    <label class="form__label">Email:</label>
    <input type="email" class="form__input js-type-email">
  </div>
  <div class="form__user-password">
    <label class="form__label">Придумайте пароль:</label>
    <input type="password" class="form__input js-type-pass">
  </div>
  <input type="checkbox" class="form__check" checked>
  <label class="form__text">Регистрируясь, вы подтверждаете, что вам уже исполнилось <br> 18 лет и вы ознакомились с условиями пользования сайтом. </label>
  <div class="page__transition page__transition-blue">
    <button type="submit" class="btn btn-blue btn-blue-disabled">продолжить</button>
  </div>
</form>

Answer 1

您需要一个else分支，以确保在每次调用事件处理程序时都能正确设置isValidateUser（无论验证结果如何）。

var userName = document.querySelector(".js-type-user");
var isValidateUser = false;  
var letterOnly = /^([a-zа-яё]+|)$/i;

userName.addEventListener("change", function (evt) {
  if (letterOnly.test(this.value)) {
    isValidateUser = true;
  } else {
    isValidateUser = false;
  }
  console.log(isValidateUser);
});

<form class="form__action" action="">
  <div class="form__user-name">
    <label class="form__label">Ваше имя:</label>
    <input type="text" class="form__input js-type-user">
  </div>
  <div class="form__user-mail">
    <label class="form__label">Email:</label>
    <input type="email" class="form__input js-type-email">
  </div>
  <div class="form__user-password">
    <label class="form__label">Придумайте пароль:</label>
    <input type="password" class="form__input js-type-pass">
  </div>
  <input type="checkbox" class="form__check" checked>
  <label class="form__text">Регистрируясь, вы подтверждаете, что вам уже исполнилось <br>
                        18 лет и вы ознакомились с условиями пользования сайтом.
                    </label>
  <div class="page__transition page__transition-blue">
    <button type="submit" class="btn btn-blue btn-blue-disabled">продолжить</button>
  </div>
</form>

Answer 2

斯科特提到你只是将值设置为true（并且永远不会回到假）。但是，你的regexp也匹配空字符串。

见下面的一个工作示例。我删除了无关的HTML。

＆＃13;

var isValidateUser = false;
var userName = document.querySelector(".js-type-user");
var letterOnly = /^([a-zа-яё]+|)[^\s]$/i;

userName.onchange = function () {
  isValidateUser = letterOnly.test(this.value);
  
  document.getElementById('isUsernameValid').textContent = isValidateUser;
};

＆＃13;

<div class="form__user-name">
    <label class="form__label">Username:</label>
    <input type="text" class="form__input js-type-user">
  </div>
  
<div id="isUsernameValid">
</div>

＆＃13;

Answer 3

我发现了两个问题：

1）你的正则表达式用空字符串返回“true”。

2）当“isValidateUser”为真时，变量不再呈现'false'。

你可以用这个来实现:(我已经改变了正则表达式并使用了修剪）

var isValidateUser = false;
var userName = document.querySelector(".js-type-user");
var letterOnly = /^[\s\[a-zа-яё]+$/i;

userName.onchange = function () {
  isValidateUser = letterOnly.test(this.value.trim()); 
  console.log(isValidateUser); 
};

<form class="form__action" action="">
  <div class="form__user-name">
    <label class="form__label">Ваше имя:</label>
    <input type="text" class="form__input js-type-user">
  </div>
  <div class="form__user-mail">
    <label class="form__label">Email:</label>
    <input type="email" class="form__input js-type-email">
  </div>
  <div class="form__user-password">
    <label class="form__label">Придумайте пароль:</label>
    <input type="password" class="form__input js-type-pass">
  </div>
  <input type="checkbox" class="form__check" checked>
  <label class="form__text">Регистрируясь, вы подтверждаете, что вам уже исполнилось <br> 18 лет и вы ознакомились с условиями пользования сайтом. </label>
  <div class="page__transition page__transition-blue">
    <button type="submit" class="btn btn-blue btn-blue-disabled">продолжить</button>
  </div>
</form>

如何正确检查表格

3 个答案: