如何创建输入文本模式（html 形式）

Question

我试图创建一个输入文本模式，它只允许 8 位数字和一个大写或简单的“d”在它的末尾，但我似乎无法限制数字的数量。例如 12345678d 或 12345678D

<input type="text" name="studentid" placeholder="Student ID"
                       pattern="[0-9]+[dD]" >

Answer 1

您可以使用 pattern="[0-9]{8}[dD]" 指定恰好 8 位数字。

Answer 2

答案很简单，但我将解释为什么思考和处理极端情况很重要。如果您对此不感兴趣，请转到代码块的末尾并复制正则表达式模式。

让我们从您尝试过的模式开始：

var pattern = /\d+[dD]/
var txt1 = "123458D";

console.log(txt1.match(pattern));

那是误报，它不应该匹配。问题是我们没有指定我们需要 8 位数字，所以让我们解决这个问题。

var pattern = /\d{8}[dD]{1}/
var txt1 = "123458D";

console.log(txt1.match(pattern)); //Doesn't match, so Good now

//But, We are not done yet
var txt2 = "123456789D"
console.log(txt2.match(pattern)); //["23456789D"] Might be a problem

我们运行遇到了另一个问题，让我们通过确保从头开始只得到 8 位数字来解决这个问题。

var pattern = /^\d{8}[dD]{1}/
var txt3 = "123456789D"
console.log(txt3.match(pattern)); //Doesn't match, so Good now

var txt4 = "12345678Dblah blah 2312412"
console.log(txt4.match(pattern)); //["12345678D"] Might be a problem

哎呀！我们还没有完成。让我们把最后一个修复并确保我们以“D”或“d”结尾。

var txt4 = "12345678Dblah blah 2312412"
var pattern = /^\d{8}[dD]{1}$/
console.log(txt4.match(pattern)); //Doesn't match now, We are good

Answer 3

maxlength 属性用于设置可以在文本框中输入的最大字符数限制。

<input type="text" maxlength="9" pattern ="[0-9]{8}[dD]">

如何创建输入文本模式（html 形式）

How to create input text patterns (html forms)

html

regex

forms