Вам нужно будет назначить обработчик события, например input
или blur
, на вход (-ы). Затем вы можете использовать RegExp test()
для проверки шаблона. Чтобы иметь это 9 чисел в длину и должны начинаться с 8 или 9, вы можете использовать шаблон /^[8-9]{1}[0-9]{8}$/g
. Вы должны выполнить test()
на шаблоне, затем условно проверить результат.
Ниже приведен пример, демонстрирующий тестирование input
и blur
событий против регулярных выражений шаблона:
HTML:
<form id="myForm">
<div class="form-group">
<label for="number1">Phone (Change)</label>
<input type="text" name="number1">
<br>
<span id="error1" class="error"></span>
</div>
<div class="form-group">
<label for="number2">Phone (Change)</label>
<input type="text" name="number2">
<br>
<span id="error2" class="error"></span>
</div>
</form>
JQuery
$(document).ready(function() {
var $form = $('#myForm');
var $input1 = $form.find('input[name="number1"]');
var $input2 = $form.find('input[name="number2"]');
var $error1 = $form.find('#error1');
var $error2 = $form.find('#error2');
var pattern = /^[8-9]{1}[0-9]{8}$/g;
$input1.on('input', function() {
var value = $(this).val();
var result = pattern.test(value);
if(result) {
console.log('Valid input');
}
else {
$error1.text('Please enter a valid number');
}
});
$input2.on('blur', function() {
var value = $(this).val();
var result = pattern.test(value);
if(result) {
console.log('Valid input');
}
else {
$error2.text('Please enter a valid number');
}
});
});
Вот jsfiddle демонстрирует функциональность.
Я изменил/^ [0-9] {9} $ /; to/^ [8-9] {1} [0-9] {8} $/g; но он все еще не работает. – GiveChance
См. мой обновленный ответ. Вы должны использовать событие 'input' для обнаружения изменений при каждом изменении в поле ввода. Я включил jsfiddle, демонстрирующий функциональность. –