提问人：Drenyl 提问时间：9/5/2018 最后编辑：NickDrenyl 更新时间：9/6/2018 访问量：2101
Javascript - 如何创建类似于 html pattern 属性的正则表达式
Javascript - How to create regex similar to html pattern attribute
问：
我正在使用 html 的属性，但由于某种原因它失败了，所以我正在考虑如何为 .patternregexjavascript
图像的突出显示部分是我使用此正则表达式属性验证的格式。我仍然无法使用 javascript 构建它。patternpattern="[A-Z]{4}[0-9]{7}"
任何答案/参考/解决方案都值得赞赏！
答：
1赞
shreyas d
9/5/2018
#1
相同的模式代码将在 JS 中工作
var pattern = /[A-Z]{4}[0-9]{7}/
var qry = 'ASDF4567543';
if(qry.match(pattern)) {
alert('valid');
}
else{
alert('invalid');
}
1赞
Nick
9/5/2018
#2
您的正则表达式在 JS 中可以正常工作。你只需要添加字符串锚点的开始（）和结束（），否则它也会匹配长度超过11个字符的字符串。^$
let container='QWSA1231231';
console.log(/^[A-Z]{4}[0-9]{7}$/.test(container));
container='QWSA123121';
console.log(/^[A-Z]{4}[0-9]{7}$/.test(container));
container='QWSA12312312';
console.log(/^[A-Z]{4}[0-9]{7}$/.test(container));
2赞
Hassan Sadeghi
9/5/2018
#3
你是对的，但首先使用，最后使用。然后像这样添加：RegExp^$required attribute
<form>
<input type="text" name="formField" pattern="^[A-Z]{4}[0-9]{7}$" required />
<input type='submit'/>
</form>
如果你想使用：javascript
HTML:
<form>
<input type="text" name="formField" />
<input type="button" value='submit'/><input style='display: none' type='submit'/>
</form>
javascript:
document.querySelector('[type="button"]').onclick=function(){
if(/^[A-Z]{4}[0-9]{7}$/.test(document.querySelector('[name="formField"]').value)==false) return alert("Please check input value and try again!");
this.nextSibling.click()
};
而且，如果你还没有，你可以尝试这个简单的方法：form
HTML:
<input type="text" name="formField" />
<input type="button" value='Add'/>
javascript:
document.querySelector('[type="button"]').addEventListener("click", function(){//or onclick = ...
if(/^[A-Z]{4}[0-9]{7}$/.test(document.querySelector('[name="formField"]').value)==false) return alert("Please check input value and try again!");
alert("Is OK!!");
});
尝试以下方法进行检查，手动输入：
document.querySelector('[name="formField"]').addEventListener("keyup", function(ev){
if(/^[A-Z]{4}[0-9]{7}$/.test(document.querySelector('[name="formField"]').value)==false) return this.style.backgroundColor="#f88";
this.style.backgroundColor="#0f0";
});<input type="text" name="formField" placeholder='Type here 4 test!'/>评论
0赞
Drenyl
9/6/2018
如果我复制粘贴有效格式，但手动键入仍然返回 false，则工作正常。
0赞
Hassan Sadeghi
9/6/2018
你测试过我的小提琴吗？它们都正常工作。你使用我的代码的哪一部分？是否可以将简单的代码（如注释中的小提琴）放在您正在使用它并有这个问题？我在回复中添加了另一部分，用于检查手动输入。
评论
pattern