Question

我要从用户那里输入“ Z1C19999”形式的信息。因此，我如何设置pattern属性。

我尝试使用以下代码。

<input type="text" name="farmercode" class="text" pattern="Z[1-3]+C[1-5]+[0-9]{5,8}" title="* Farmer's Lab Code can have only alphabets Z, C and digits between 0 and 9 in the format "Z1C19999" ">

输入的语法必须为Z [1到3之间的任何值] C [1到5之间的任何值] [0到9999之间的任何值]。最小长度为5，最大长度为8。

就我而言，即使我仅输入123456，它仍然接受错误的值。我希望它以Z开头。

Answer 1

您的模式在我测试过的Chrome中效果很好：请参见this CodePen

input[pattern] ~ span {
  display: none;
}
input[pattern]:valid ~ span.valid {
  display: inline-block;
}
input[pattern]:invalid ~ span.invalid {
  display: inline-block;
}

<form>
  <input
         type="text"
         name="farmercode"
         class="text"
         pattern="Z[1-3]+C[1-5]+[0-9]{5,8}"
         title="* Farmer's Lab Code can have only alphabets Z, C and digits between 0 and 9 in the format Z1C19999">
  <span class="valid">Valid</span>
  <span class="invalid">Invalid</span>
</form>

但是，我认为最能描述您的句子的RegExp如下

输入的语法必须为Z [1到3之间的任何值] C [1到5之间的任何值] [0到9999之间的任何值]。最小长度为5，最大长度为8。

Z[1-3]C[1-5][0-9]{5,8}

哪个引出了我的结论：是什么让您认为它不起作用？

提示：添加required属性以将某些内容强制放入其中。

Answer 2

您需要提交字段以获取错误或使用事件处理程序

您在标题中嵌套了引号
该模式与预期的输入不匹配，我在这里https://regex101.com/r/SZzKRJ/3/
Z [介于1到3之间的任何值]
C [介于1到5之间的任何值]
[0到9999之间的任何值]。
最小长度为整件事情的5到8，这在您的问题中并不明显。因此，Cn后最少1位，最多4位

<form>
<input type="text" name="farmercode"
class="text" pattern="Z[1-3]+C[1-5]+[0-9]{1,4}" 
title="* Farmer's Lab Code can have only alphabets Z, C and digits between 0 and 9 in the format 'Z1C19999' " />
<input type="submit" />
</form>

这里是如何测试模糊

var pattern = /^Z[1-3]+C[1-5]+[0-9]{1,4}$/
document.querySelector("[name=farmercode]").addEventListener("blur",function(e) {
  var fld = e.target;
  console.log(fld.value,pattern.test(fld.value))
  if (!pattern.test(fld.value)) {
    alert(fld.title);
    fld.value="";
  }
})

<input type="text" name="farmercode"
class="text"
title="* Farmer's Lab Code can have only alphabets Z, C and digits between 0 and 9 in the format 'Z1C19999' " />

HTML输入模式属性

2 个答案: