javascript 如何确保用户可以在任一字段中输入0,但不能同时在两个字段中输入

jckbn6z7  于 12个月前  发布在  Java
关注(0)|答案(5)|浏览(109)

我需要验证下面的字段,用户可以输入0,但不能在两个字段中输入,并且两个字段都不能为空。
我正在努力做到这一点:

if((document.getElementById("NumberOfOpenings").value.trim() == "" || document.getElementById("NumberOfOpenings").value.trim() == 0) && (document.getElementById("NumberOfEntrances").value.trim() == "" || document.getElementById("NumberOfEntrances").value.trim() == 0)) {
// instruct user to only enter 0 in one but not both fields, and make sure field is not left black.
} else {
    // carry on
    }
}

在这个问题上我能得到一些基本的帮助吗?代码看起来是否正确?
谢谢你

byqmnocz

byqmnocz1#

修改后的代码版本应该可以解决您的问题:

let openingsValue = document.getElementById("NumberOfOpenings").value.trim();
let entrancesValue = document.getElementById("NumberOfEntrances").value.trim();

if (openingsValue === "" || entrancesValue === "") {
    // Instruct user that neither field can be left empty
} else if (parseInt(openingsValue, 10) === 0 && parseInt(entrancesValue, 10) === 0) {
    // Instruct user to only enter 0 in one field, but not both fields
} else {
    // Go on
}
jqjz2hbq

jqjz2hbq2#

首先,通过将值复制到变量中来使代码更易于阅读,这样就不必一直编写对getElementById()的冗长调用。
你可以把这三个条件结合起来。

let numOpenings = document.getElementById("NumberOfOpenings").value.trim();
let numEntrances = document.getElementById("NumberOfEntrances").value.trim();

if (numOpenings === "" || numEntrances === "" || (numOpenings === "0" && numEntrances === "0") {
    // report validation error
} else {
    // process values
}
k10s72fa

k10s72fa3#

尝试将id存储在变量上,如果

let numberOfOpeningsValue = document.getElementById("NumberOfOpenings").value.trim();
let numberOfEntrancesValue = document.getElementById("NumberOfEntrances").value.trim();

        if (numberOfOpeningsValue === "" || numberOfOpeningsValue === 0 ) {
        // Logic When numberOfOpeningsValue has an empty value and numberOfOpeningsValue is equal to 0
    } else if (numberOfEntrancesValue === "" || numberOfEntrancesValue === 0) {
       // Logic When numberOfEntrancesValue has an empty value and numberOfEntrancesValue is equal to 0
    }
    else if (numberOfOpeningsValue === "" || numberOfOpeningsValue === 0) {
        // Logic When numberOfOpeningsValue has an empty value and numberOfOpeningsValue is equal to 0
    } else if (numberOfEntrancesValue === "" || numberOfEntrancesValue === 0) {
        // Logic When numberOfEntrancesValue  has an empty value and numberOfEntrancesValue  is equal to 0
    } else {
        // Carry on
    }
4smxwvx5

4smxwvx54#

这个问题在我看来更像是一个方法问题,而不是JS帮助。所以,这里是一个简单的易于理解的代码(伪代码几乎)有一个错误抛出的基础上输入的值或不.

value1 = getRef(1stField); // document.getElementById("NumberOfOpenings").value.trim();
value2 = getRef(2ndField); // document.getElementById("NumberOfEntrances").value.trim();

function notEmpty(value){
  if(value !== null && value !== undefined)return true;
  return false;
}

// validate returns true if validated otherwise throws error
function validate(){

  if(notEmpty(value1) && notEmpty(value2)){
    if(value1 == 0 && value2 === 0)throw Error("both can't be zero");
  }else{
    throw Error("Need both values");
  }

  return true;
}
zyfwsgd6

zyfwsgd65#

您可以添加一些自定义表单验证逻辑。
下面是一个表单的例子,其中任何一个字段都可以提交。由于我将<input>元素作为[type="number"]输入,因此不允许空值。

document.forms['CustomForm'].addEventListener('submit', handleSubmit);

function validateForm(form) {
  const errorMessages = {};
  const openingsInput = form.elements.NumberOfOpenings;
  const entrancesInput = form.elements.NumberOfEntrances;
  if (!isValidNumber(openingsInput) && !isValidNumber(entrancesInput)) {
    errorMessages['NumberOfOpenings'] = 'Both fields should not be empty!';
  }
  if (!isNonZero(openingsInput) && !isNonZero(entrancesInput)) {
    errorMessages['NumberOfOpenings'] = 'A zero may only be present in one field!';
  }
  return errorMessages;
}

function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const openingsInput = form.elements.NumberOfOpenings;
  const errorMessages = validateForm(form);
  for (let field of form.elements) {
    const groupEl = field.closest('.input-group');
    if (!groupEl) {
      continue;
    }
    const errorMessageEl = groupEl.querySelector('.error-message');
    const errorMessage = errorMessages[field.name];
    groupEl.classList.toggle('has-error', errorMessage != null);
    errorMessageEl.textContent = errorMessage ?? '';
  }
  if (Object.keys(errorMessages).length === 0) {
    console.log('Success!');
    //form.submit();
  }
}

function isValidNumber(numberInput) {
  return !isNaN(numberInput.valueAsNumber);
}

function isNonZero(numberInput) {
  return numberInput.valueAsNumber !== 0;
}
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.input-group {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-row-gap: 0.5rem;
  grid-column-gap: 1rem;
}

.input-group:has(input[required]) label:after {
  content: '*';
  color: red;
}

.input-group.has-error input {
  border-color: red;
}

.input-group input {
  width: 100%;
}

.input-group .error-message {
  display: hidden;
  color: red;
  grid-column: 1/3;
}

.input-group.has-error .error-message {
  display: block;
}
<form class="form" name="CustomForm">
  <div class="input-group">
    <label for="no-op">Number of Openings:</label>
    <input type="number" id="no-op" name="NumberOfOpenings" value="0" required />
    <span class="error-message"></span>
  </div>
  <div class="input-group">
    <label for="no-en">Number of Entrances:</label>
    <input type="number" id="no-en" name="NumberOfEntrances" value="0" required />
    <span class="error-message"></span>
  </div>
  <button type="submit">Submit</button>
</form>

相关问题