Question

在简单的HTML表单上练习我的Javascript。在一个框中输入密码，再次输入以在第二个框中确认。密码应包含6个字符（包括1个数字），不能包含空格。如果密码符合条件并且匹配，则会弹出警告消息。

我主要在那里，因为如果不符合条件会弹出错误消息，但我无法提醒“成功！”我玩弄if语句的方式很多，我不确定我错过了什么。有什么建议吗？

使用Javascript：

selected_toppings = Topping.where(id: params[:topping_ids])

表格：

pizza.toppings << selected_toppings

Answer 1

有多个问题

功能clearFields()仅在validateConfirm
您正在页面加载时只读取一次确认输入的值，您需要在validate方法中读取新值，否则它将始终为空字符串
由于您要在密码字段中验证策略，因此您无需再次检查确认字段，因为您正在检查确认和密码字段是否相同

＆＃13;

window.onload = function() {
  document.getElementById('submit').addEventListener('click', validateInput);
}


function validatePassword() {
  var userPass = document.getElementById('password').value;
  var confirmPass = document.getElementById('confirm_password').value;

  if (userPass.length == 0) { // Nothing was entered
    document.getElementById('password_error').innerHTML = 'Please enter a password';
  } else if (userPass.length < 6) { // Less than 6 chars 
    document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length';
  } else if (userPass.match(/\s/)) { // contains a space
    document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces';
  } else if (!userPass.match(/\d/)) { // Does not contain a number
    document.getElementById('password_error').innerHTML = 'Your password must contain a number';
  } else if (userPass !== confirmPass) {
    document.getElementById('password_error').innerHTML = "";
    document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';
  } else {
    document.getElementById('password_error').innerHTML = "";
    document.getElementById('confirm_error').innerHTML = "";
    alert("Success!");
    clearFields();
    return true;
  }
  return false;
}

function clearFields() {
  document.getElementById('password').value = '';
  document.getElementById('confirm_password').value = '';
}


function validateInput() {
  return validatePassword();
}

＆＃13;

<fieldset>
  <legend>CONFIRM PASSWORD</legend>
  <label for="name">Password:</label>
  <input type="text" id="password" size="10" />
  <p id="password_error" class="error"></p>
  <label for="name">Confirm Password:</label>
  <input type="text" id="confirm_password" size="10" />
  <p id="confirm_error" class="error"></p>
  <button id="submit">Submit</button>
</fieldset>

＆＃13;

Answer 2

我在你的代码中发现了两个错误

在函数validatePassword（）;
var confirmPass输入内部函数或从调用函数传递

window.onload = function () {

    document.getElementById('submit').addEventListener('click', validateInput);
}

function validatePassword() {
    var userPass = document.getElementById('password').value;
    var confirmPass = document.getElementById('confirm_password').value;
    if (userPass.length == 0) { // Nothing was entered
        document.getElementById('password_error').innerHTML = 'Please enter a password';
    } else if (userPass.length < 6) { // Less than 6 chars 
        document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length';
    } else if (userPass.match(/\s/)) { // contains a space
        document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces';
    } else if (!userPass.match(/\d/)) { // Does not contain a number
        document.getElementById('password_error').innerHTML = 'Your password must contain a number';
    } else if (userPass !== confirmPass) {
        document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';
    } else {
        document.getElementById('password_error').innerHTML = "";
        document.getElementById('confirm_error').innerHTML = "";
        alert("Success!");
        clearFields();
    }
}
function clearFields() {
    document.getElementById('password').value = null;
    document.getElementById('confirm_password').value = null;
}
function validateConfirm() {
    var userPass = document.getElementById('password').value;
    var confirmPass = document.getElementById('confirm_password').value;
    if (confirmPass.length == 0) {
        document.getElementById('confirm_error').innerHTML = "Please confirm password to proceed";
    } else if (confirmPass.length < 6) {
        document.getElementById('confirm_error').innerHTML = "Your password must be at least 6 characters in length";
    } else if (userPass !== confirmPass) {
        document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';
    } else {
        document.getElementById('password_error').innerHTML = "";
        document.getElementById('confirm_error').innerHTML = "";
        alert("Success!");
        clearFields();
    }
}

function validateInput() {
    validatePassword();
    validateConfirm();
}

 <form>
   <fieldset>
        <legend>CONFIRM PASSWORD</legend>
        <label for="name">Password: </label>
        <input type="text" id="password" size="10" />
        <p id="password_error" class="error"></p>
        <label for="name">Confirm Password: </label>
        <input type="text" id="confirm_password" size="10" />
        <p id="confirm_error" class="error"></p>
        <button id="submit">Submit</button>
    </fieldset>
    </form>

Javascript表单验证不成功

2 个答案: