Как запретить ввод чисел в форму с помощью JavaScript
Это часть моей многоэтапной регистрационной формы, и она работает нормально. Но я хочу добавить проверку номера в переменную «student_name», чтобы система не позволяла студенту вводить число в свое имя.
if (step === 2) {
// Example: check if username is not empty
var student_name = document.querySelector('#student_name').value;
if (student_name === '') {
isValid = false;
Swal.fire({
icon: 'error',
title: 'Field still empty'
});
} else if (student_name.length < 3 || student_name.length > 30) {
isValid = false;
Swal.fire({
icon: 'info',
title: 'the character must <3 or >30'
});
} else
var student_email = document.querySelector('#student_email').value;
if (student_email === '') {
isValid = false;
Swal.fire({
icon: 'error',
title: 'Field still empty'
});
} else if (!student_email.includes('@')) {
isValid = false;
Swal.fire({
icon: 'error',
title: 'Email must include "@"'
});
}
}
Поэтому я добавил этот код, который получил от ai.
if (/\d/.test(student_name)) {
isValid = false;
// Display an error message using SweetAlert
Swal.fire({
icon: 'error',
title: 'Error',
text: 'number is not allowed in student name.'
});
}
Итак, это мой код после того, как я добавлю этот код.
if (step === 2) {
// Example: check if username is not empty
var student_name = document.querySelector('#student_name').value;
if (student_name === '') {
isValid = false;
Swal.fire({
icon: 'error',
title: 'Field still empty'
});
} else if (student_name.length < 3 || student_name.length > 30) {
isValid = false;
Swal.fire({
icon: 'info',
title: 'the character must <3 or >30'
});
}
// new added code (start)
else if (/\d/.test(student_name)) {
isValid = false;
// Display an error message using SweetAlert
Swal.fire({
icon: 'error',
title: 'Error',
text: 'number is not allowed in student name'
});
}
// new added code (end)
else
var student_email = document.querySelector('#student_email').value;
if (student_email === '') {
isValid = false;
Swal.fire({
icon: 'error',
title: 'Field still empty'
});
} else if (!student_email.includes('@')) {
isValid = false;
Swal.fire({
icon: 'error',
title: 'Email must include "@"'
});
}
}
Но это не сработало - сообщения об ошибке нет.
«Я хочу добавить проверку числа в переменную «student_name». Тогда откуда взялся nama_siswa? Это нигде не определено. Вы должны получить сообщение об ошибке, связанное с доступом к необъявленной переменной.
Достойная проверка формы должна выполняться не с помощью JavaScript (кроме Node.js), а с помощью встроенного метода проверки с использованием атрибута required, чтобы форма могла автоматически проверять себя!
Пожалуйста, ознакомьтесь с разделом Как спрашивать, а затем измените заголовок, чтобы задать что-то более конкретное.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Я думаю, ошибка кроется в имени переменной nama_siswa.
Вместо этого вам следует использовать имя студента в качестве переменной для проверки с регулярным выражением /d, представляющим цифры от 0 до 9.
Итак, ваш код должен выглядеть так:
// new added code (start)
else if (/\d/.test(student_name)) {
isValid = false;
// Display an error message using SweetAlert
Swal.fire({
icon: 'error',
title: 'Error',
text: 'number is not allowed in student name'
});
}
// new added code (end)
HTML-формы проверяют себя.
Чтобы проверить, имеет ли имя длину от 3 до 30 символов, вы можете добавить атрибуты minlength = "3" и maxlength = "30".
Электронная почта может быть проверена, если входные данные имеют атрибут type = "email".
Все, что вам нужно сделать, это добавить атрибут required к входным данным, и он даже выдаст локализованное сообщение об ошибке, которое зависит от языка системы пользователя:
<form>
<label for = "name">Name:</label>
<input type = "text" id = "name" minlength = "3" maxlength = "30" required>
<br>
<label for = "email">E-Mail:</label>
<input type = "email" required>
<br><br>
<input type = "submit">
</form>PS: Не стоит просить ИИ программировать за вас. ИИ просто выполнит ваше приглашение и предоставит ответ на его основе. ИИ не скажет вам, если вы изначально зададите неправильный вопрос (XY-проблема).
Вы можете использовать встроенную проверку формы. Для ученика назовите минимальную и максимальную длину и, возможно, какой-нибудь шаблон.
Для отображения оповещения вы можете использовать недействительное событие, которое запускается, когда что-то в форме недействительно.
Форма будет отправлена только в том случае, если вся форма действительна.
document.forms.form01.addEventListener('invalid', e => {
e.preventDefault();
swal({
title: e.target.title,
icon: "error",
});
}, true);
document.forms.form01.addEventListener('submit', e => {
e.preventDefault();
console.info('submitting...');
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity = "sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA= = " crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<form name = "form01">
<label>Student name:<input type = "text" name = "student_name" minlength = "3"
maxlength = "30" pattern = "[^\d]+"
title = "Student name must be between 3 and 30 characters and no digits"
required></label>
<label>Student email:<input type = "email" name = "student_email"
title = "The email must be a valid email address" required></label>
<button>Submit</button>
</form>Я думаю, что Ален Гави прав: ваша проблема в том, что регулярное выражение проверяет переменную с именем nama_siswa вместо student_name. Однако хочу добавить, что помимо цифр в поле имени вы можете столкнуться с массой других проблем.
Например, в Юникоде есть массив числовых символов, которые не обрабатываются \d. В некоторых случаях вы можете использовать \p{n} для сопоставления всех символов Юникода с «числовым» свойством, но, похоже, это пока не очень хорошо реализовано в браузерах. Некоторые обходные пути можно найти здесь: Как я могу использовать регулярные выражения с поддержкой Unicode в JavaScript?
Если вы знаете местоположение своих пользователей и можете ожидать, что они будут использовать языки, основанные на латинском алфавите, возможно, будет проще ограничить ввод набором разрешенных символов. Однако вы должны быть достаточно снисходительны, чтобы разрешить такие варианты, как é и ñ. Я настоятельно рекомендую программу RegexBuddy для проверки вашего регулярного выражения на возможные имена.
Наконец, я настоятельно рекомендую выполнить дополнительную проверку серверной части. Если плохие символы могут испортить другие ваши скрипты, то вы не можете полагаться только на проверку на основе браузера. Серверу необходимо проверить введенные данные и убедиться, что они соответствуют, прежде чем они будут сохранены.
Как выглядит HTML-форма?