html5 验证需要 setCustomValidity

Posted 2023-03-28

【中文标题】html5 验证需要 setCustomValidity

【英文标题】：html5 validation required setCustomValidity

【发布时间】：2020-11-27 02:26:33

【问题描述】：

我有检查用户输入信息的验证功能。 如果用户在文本中输入空，它会弹出消息“请输入数字”。

现在，如果用户输入超过 7 个数字，我也想添加错误消息，它会显示错误消息，但是当用户输入错误数据时，我不知道有两个错误消息。

我尝试使用 type="Number" maxLength = "7"，但它不起作用，因为类型号不支持 maxLength。

有人可以帮忙吗？谢谢

<input asp-for="ID" id="ID" class="form-control" type="text" value="@Context.Request.Query["ID"]" required oninvalid="this.setCustomValidity(' Please enter Number')"
  oninput="this.setCustomValidity('')"   />

【问题讨论】：

您可能需要使用 addEventListerner 进一步自定义您的 setCustomValidity 方法，看看这里：developer.mozilla.org/en-US/docs/Learn/Forms/… 如果这是您需要的，请告诉我，我会写一个正确的答案。

【参考方案1】：

有多种方式：

max 是您要查找的内容，而不是 maxlength：

<form action="javascript:void(0);">
<span>Try submitting with number <code>1111111</code>.</span>
<input type="number" max="7" required="required" />
<input type="submit" />
</form>

蛮力法

：使用JavaScript查看数字是否大于7：

function check(object) 
  console.log(object.value);
  if (object.value == "") 
    document.getElementById('err').innerhtml = '<span style="color:red;">Please enter something!</span>';
   else if (parseInt(object.value) > 7) 
    document.getElementById('err').innerHTML = '<span style="color:red;">Number exceedes 7!</span>';
   else 
    document.getElementById('err').innerHTML = '<span style="color:#00ff00;">Good to go!</span>';
  

<input type="number" id="number" onkeyup="check(this);" />
<span id="err"></span>

另外，maxlength 是指可以在文本字段中输入的最大字符数。所以maxlength="7" 将允许输入1111111。