如何限制输入类型答案

【问题标题】：how to restrict input type如何限制输入类型
【发布时间】：2019-07-04 15:47:33
【问题描述】：

目前我正在尝试限制只能输入 3 个字母和 2 个数字的输入数据。它将在单击按钮后进行检查。我的错误代码：

component.html

<input type="text" name="test3" [(ngModel)]="test3" 
onkeyup="this.value=this.value.replace(/[^\a-\z\A-\Z0-9]/g,'');">
<button (click)="checkNumber3(test3)">submit</button>

component.ts

checkNumber3(test3): void {
    console.log(test3);
    if (test3 !== test3.match(/([a-z])+/) * 2 || test3 !== test3.match(/([A-Z])+/) * 2
    && test3 !== test3.match(/([0-9])+/) * 3
    ) {
        alert('only can input 2 letters plus 3 numbers');
    } else {
        alert('correct');
    }
}

感谢您的帮助！

【问题讨论】：

它做错了什么？
老兄，你的意思是我的代码或我的帖子由 mr.pimpale 编辑？
您的代码。他在问它是如何行为不端的，它应该如何表现。 Prashant 的修改尚不可见。

标签： javascript html angular angular-directive

【解决方案1】：

从这里查看 Angular 6 在线编辑器：

StackBlitz

【讨论】：

【解决方案2】：

在输入按键中添加您的校验码功能，如下面的代码

<input type="text" name="test3" [(ngModel)]="test3"  (keypress)="checkNumber3(test3)"
onkeyup="this.value=this.value.replace(/[^\a-\z\A-\Z0-9]/g,'');">
<button (click)="checkNumber3(test3)">submit</button>

【讨论】：

【解决方案3】：

你可以这样做！

<head>
<script type="text/javascript">
    function checkIf_AlphaNum()
    {
            var regex1 = RegExp('^([a-zA-Z]){3}([0-9]){2}?$');
            if(regex1.test(document.getElementById("txtnumber").value)) 
            {
                document.getElementById("msg_2_show").innerHTML="given string matched against pattern!";
                document.getElementById("msg_2_show").style.color="#7CFC00";

                //alert("given string matched against pattern!");
            }
            else {
                document.getElementById("msg_2_show").innerHTML="invalid  pattern!";
                document.getElementById("msg_2_show").style.color="#B22222";


                }
    }
</script>

</head>


<body>
<h4 id="msg_2_show"></h4>
<form   >
        <label>Enter No.:</label>

        <input type="text" id="txtnumber" name="txtnumber"  />
        <input type="button" value="Submit!" name="btnsubmit" onclick="checkIf_AlphaNum()"/>

</form>

</body>
</html>

【讨论】：

【解决方案4】：

您的 Javascript 块需要进行一些更改。试一试：

if (test3.match(/([A-z])/g).length === 2 && (test3.match(/([0-9])/g).length === 3)) {
    alert('correct');
} else {
    alert('only can input 2 letters plus 3 numbers');
}

【讨论】：

@seekerJackson glhf :)

【解决方案5】：

而不是在同一个字符串上运行多个 RegEx 并创建一次性数组。您应该能够使用单个正则表达式和test() 进行简单的验证功能。例如：

function validate(string) {
  // two letters or three numbers
  return /^([a-zA-Z]{2}|[0-9]{3})$/.test(string)
}


console.log(validate("Aa"))   // true
console.log(validate("Aaa"))  // false
console.log(validate("120"))  // true
console.log(validate("1090")) // false
console.log(validate("1"))    // false
console.log(validate(""))     // false
console.log(validate("A3"))   // false

【讨论】：

【解决方案6】：

我认为你应该这样做：

if(test3.match(/([a-z])+/).length === 2 || 
   test3.match(/([A-Z])+/).length === 2 && 
   test3.match(/([0-9])+/).length === 3)
{
    doStuff()
}

编辑（解释）

String.match 返回一个匹配数组。所以获取它的长度会让你知道你是否有正确的数据。

另外，正确的正则表达式是/([a-z]])/g 和A-Z 和0-9 类似

【讨论】：

也可以简化为test3.match(/([A-Za-z])/g).length === 2
你真是个好人，非常感谢你，我的问题已经解决了

【解决方案7】：

您应该像这样使用split() 和filter()：

checkNumber3(test3): void {
    console.log(test3);
    if (test3.split("").filter(e => isNaN(e)).length > 2 || test3.split("").filter(e => typeof parseInt(e) == "number")) {
        alert('only can input 2 letters plus 3 numbers');
    } else {
        alert('correct');
    }
}

【讨论】：

【解决方案8】：

使用 [maxlength] 和 [minlength] 是 component.html 文件来检查长度。

要检查 ts 文件中的数字和字母，请使用 ^\d{2}[a-zA-Z]{3}$ 这个正则表达式。

【讨论】：

好的开始，但要写实际代码以获得更多投票。