Question

我需要输入一个由9位数字和一个字母结尾的ID号码。我的正则表达式看起来很安静，但验证未按预期进行。

我的输入标签如下所示。

我正在使用symfony树枝

<input type="text" 
    id="register_idNumber" 
    placeholder="NIC Number" 
    onkeypress="isInputNumber(event)" 
    pattern="^[0-9]{9}[a-zA-Z]$" 
    value="{{ form.idNumber.vars.value }}" 
    name="register[idNumber]" 
    required="required" 
    class="form-control" 
    oninvalid="this.setCustomValidity('Not a valid ID number! ')"
/>
<div class="input-group-append">

Answer 1

频繁使用事件处理程序的内联版本使我们无法正确执行操作所需的逻辑。

如果遇到任何错误，将转到.setCustomValidity()，它将永久设置在该元素上。输入的内容永远不会正确，因为您将其设置为正确的。

请注意以下代码，并通过代码添加了事件处理程序，以便在正确输入后支持必要的错误消息清除。

const idNumber = document.querySelector('input');
const form = document.querySelector('form');
const out = document.getElementById('output');


idNumber.addEventListener('input', () => {
  out.style.display = "none";
  idNumber.setCustomValidity('');
  idNumber.checkValidity();
});

idNumber.addEventListener('invalid', () => {
  if (idNumber.value === '') {
    idNumber.setCustomValidity('Enter your id!');
  } else {
    idNumber.setCustomValidity('Must be 9 digits followed by one letter.');
  }
});

form.addEventListener('submit', e => {
  out.style.display = "block";
  e.preventDefault()
});

#output{display:none}

<form>
<input type="text" 
    id="register_idNumber" 
    placeholder="NIC Number" 
    onkeypress="" 
    pattern="^[0-9]{9}[a-zA-Z]$" 
    value="" 
    name="register[idNumber]" 
    required="required" 
    class="form-control" 
/>
<button type="submit">Submit</button>
</form>
<div id="output">Form submitted.</div>

或者，不要使用内联事件处理程序。

HTML5验证不适用于symfony树枝

1 个答案: