как ограничить тип ввода - PullRequest
Новая
       41

как ограничить тип ввода

0 голосов
/ 11 февраля 2019

В настоящее время я пытаюсь ограничить входные данные, которые могут вводить только 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');
    }
}

Спасибо за вашу помощь!

Ответы [ 8 ]

0 голосов
/ 11 февраля 2019

Проверьте это здесь для Angular 6 онлайн-редактор:

StackBlitz

0 голосов
/ 11 февраля 2019

Вы можете сделать это так! 

<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>
0 голосов
/ 11 февраля 2019

добавьте свою функцию контрольного номера, как показано ниже в коде ввода

<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>
0 голосов
/ 11 февраля 2019

Ваш блок 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');
}
0 голосов
/ 11 февраля 2019

Вместо запуска нескольких регулярных выражений для одной и той же строки и создания одноразовых массивов.Вы должны быть в состоянии сделать простые функции проверки с одним регулярным выражением и 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
0 голосов
/ 11 февраля 2019

Вы должны использовать 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');
    }
}
0 голосов
/ 11 февраля 2019

Используйте [maxlength] и [minlength] в файле component.html для проверки длины.

и для проверки числа и буквы в файле ts используйте ^ \ d {2} [a-zA-Z] {3} $ это регулярное выражение.

0 голосов
/ 11 февраля 2019

Я думаю, вы должны сделать что-то вроде: 

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

...