进一步阅读

Question

我有一个要使用HTML 5（和jQuery）进行验证的表单。该表单具有从数据库加载的初始值。用户可以编辑数据，然后提交表单。我有一个maxlength设置为6的输入框，但有时从数据库中提取的值包含6个以上的字符。如果用户什么都不做，只是单击提交，那么我想要一个HTML 5验证警告。但是表单提交时没有警告

<form id="checkValues" method="post">
<input id="reading01" name="reading01" type="text" required class="form-control" maxlength="6" value="12345678" pattern="{0,6}">
<button class="btn btn-primary" type="submit">Update</button>
</form>

我尝试添加模式{0,6}，但这没有任何区别。我不希望表单自动删除字符，用户必须这样做。我尝试使用jQuery validate，但我认为我做的不正确：

$(window).on("load", function() {
    const $reading01 = document.querySelector('#reading01');
    $reading01.validate();
}

Answer 1

如果您规范化<button>（即给它type="button"而不是type="submit"），则可以利用 HTML5约束API 进行表单验证。

HTML5约束API 使您可以定义自己的验证约束。

表单验证后，您可以使用submit()提交表单。

工作示例：

const checkValuesForm = document.getElementById('checkValues');
checkValuesFormSubmitButton = checkValuesForm.querySelector('[data-type="submit"]');

const checkValues = (formSubmitted = false) => {

  const reading01 = document.getElementById('reading01');
  
  if (reading01.value.length > 6) {
    
    reading01.setCustomValidity('This number cannot be more than 6 digits long');
    reading01.reportValidity();
  }

  else {
  
    reading01.setCustomValidity('');
    
    if (formSubmitted === true) {
    
      checkValuesForm.submit();
    }
  }
}

checkValuesFormSubmitButton.addEventListener('click', () => checkValues(true), false);
reading01.addEventListener('keyup', checkValues, false);
window.addEventListener('load', checkValues, false);

<form id="checkValues" method="post">
<input id="reading01" name="reading01" type="text" required class="form-control" maxlength="6" value="12345678" />
<button class="btn btn-primary" type="button" data-type="submit">Update</button>
</form>

进一步阅读

Answer 2

您只需要显示警告或阻止进一步操作，在这种情况下，您可以通过获取ID并检查其是否为空来进行自己的验证。

Answer 3

像 Rounin所说的Je sus Monica 所说，使用setCustomValidity是发送消息以告知输入错误的最干净方法。不过，由于您使用的是submit按钮，因此可以在发送请求之前侦听表单的submit事件并对其进行验证。另外，您可以使用Document.forms只读属性，该属性将返回HTMLFormElement的集合。我喜欢代码的外观，因为很容易理解您正在使用表单。

const form = document.forms['checkValues'];
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const validatedInput = form.elements['reading01'];
  if (validatedInput.value.length > 6) {
    validatedInput.setCustomValidity("The input value cannot be longer than 6.");
    return;
  }
  form.submit();
});

<form id="checkValues" method="post">
  <input id="reading01" name="reading01" type="text" required class="form-control" maxlength="6" value="12345678" pattern="{0,6}">
  <button class="btn btn-primary" type="submit">Update</button>
</form>

还有一件事情，这只是个人喜好，在命名变量时，我通常为jQuery元素添加 $ 符号。因此，如果我偶然使用了jQuery库，则可以识别出哪个变量包含普通的javascript元素和哪个jQuery元素。

在输入框中对现有值进行HTML5验证

3 个答案:

进一步阅读