Итак, разберу проверки на js для себя и для тех кому будет это интересно.
Данные методы проверки работают в FF, Opera, IE8 (в остальных не проверял).
Предположим что у нас есть форма, которая должна отправлять введенные данные на страницу reg.php методом POST с полями:
1. "Имя" (Обязательное поле, проверка на длину имени, допустим это будет минимум 2 символа)
2. "Телефон" (Запрет на ввод букв и символов, разрешим вводить только цифры, ну и использовать клавишу "Backspace" для стирания написанных символов, проверка на длину номера - минимум 9 цифр)
3. "E-mail" (Обязательное поле, проверка по маске)
4. "Пароль" (Обязательное поле, проверка на длину пароля, возьмем по стандарту 6 символов)
5. "Повтор пароля" (Обязательное поле, проверка что данные из этого поля совпадают с данными в поле "Пароль")
6. Checkbox "Согласен с правилами регистрации" (Флажок обязательно должен быть отмечен пользователем)
7. Кнопка "Зарегистрироваться" (При нажатии на кнопку проверяется форма и в случае успешной проверки производится отправка данных, иначе показывает ошибку с указанием на требования при заполнении определенного поля)
Изначальная форма в html будет выглядеть примерно так:
<form name="form" action="reg.php" method="post">
Имя*:<br/><input type="text" name="name" id="name"/><br/>
Телефон:<br/><input type="text" name="phone" id="phone"/><br/>
E-mail*:<br/><input type="text" name="email" id="email"/><br/>
Пароль*:<br/><input type="password" name="password" id="password"/><br/>
Повтор пароля*:<br/><input type="password" name="password1" id="password1"/><br/>
<input type="checkbox" name="consent" id="consent"/>Согласен с правилами регистрации*<br/>
<input type="submit" value="Зарегистрироваться"/>
</form>
Чтобы запустить проверку формы при нажатии на кнопку "Зарегистрироваться" добавим в тег form событие при нажатии submit, которое мы назовем valid_form
<form name="form" action="reg.php" method="post" onsubmit="return valid_form();">
...
Добавим в поле "Телефон" событие реагирующее на нажатие клавиши, которое будет проверять цифру вводят или нет, назовем его valid_key_number
...
Телефон:<br/><input type="text" name="phone" id="phone" onkeypress="return valid_key_number(event);"/><br/>
...
C формой мы закончили, теперь приступим к написанию javascript'а, который собственно и будет выполнять все проверки.
Создадим функцию valid_form, которая будет отвечать за проверку формы после нажатия кнопки регистрации, а так же введем в ней переменную valid, которая будет решать отправить форму или же выдать ошибку:
<script type="text/javascript">
function valid_form(){
valid=true;
...
return valid;
}
</script>
1.1 Поле "Имя" должно быть заполнено поэтому проверим чтобы поле было не пустым, и если оно пустое выдаем ошибку и прерываем отправку формы.
if(document.getElementById("name").value==""){
alert("Пожалуйста заполните поле 'Имя'.");
valid=false;
}
1.2 Поле "Имя" должно состоять из не менее чем двух символов, поэтому вводим дополнительную проверку.
if(document.getElementById("name").value.length<2){
alert("Имя слишком короткое.");
valid=false;
}
2. Поле "Телефон" должно состоять из не менее чем девяти символов - вводим проверку на длинну (запрет на ввод символов и букв мы введем чуть позже в функции valid_key_number).
if(document.getElementById("phone").value.length<9&&document.getElementById("phone").value!=""){
alert("Номер телефона слишком короткий.");
valid=false;
}
3.1. Поле "E-mail" обязательно - вводим проверку.
if(document.getElementById("email").value==""){
alert("Пожалуйста заполните поле 'E-mail'.");
valid=false;
}
3.2. Вводим проверку поля E-mail по маске, чтобы определить введен email или же набор символов.
if(document.getElementById("email").value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/)==null){
alert("Неверный E-mail адрес.");
valid=false;
}
4.1 Поле "Пароль" обязательно - вводим проверку.
if(document.getElementById("password").value==""){
alert("Пожалуйста заполните поле 'Пароль'.");
valid=false;
}
4.2 Поле "Пароль" должно состоять из не менее чем шести символов, поэтому вводим дополнительную проверку.
if(document.getElementById("password").value.length<6){
alert("Пароль слишком короткий.");
valid=false;
}
5.1 Поле "Повтор пароля" обязательно - вводим проверку.
if(document.getElementById("password1").value==""){
alert("Пожалуйста заполните поле 'Повтор пароля'.");
valid=false;
}
5.1 Проверяем совпадают ли поля "Пароль" и "Повтор пароля".
if(document.getElementById("password").value!=document.getElementById("password1").value){
alert("Поля 'Пароль' и 'Повтор пароля' не совпадают.");
valid=false;
}
6 Флажок "Согласен с правилами регистрации" должен быть отмечен - вводим проверку.
if(document.getElementById("consent").checked==false){
alert("Чтобы зарегистрироваться необходимо согласиться с правилами.");
valid=false;
}
Теперь объединим все эти проверки в функцию valid_form.
<script type="text/javascript">
function valid_form(){
valid=true;
if(document.getElementById("name").value==""){
alert("Пожалуйста заполните поле 'Имя'.");
valid=false;
}else{
if(document.getElementById("name").value.length<2){
alert("Имя слишком короткое.");
valid=false;
}else{
if(document.getElementById("phone").value.length<9&&document.getElementById("phone").value!=""){
alert("Номер телефона слишком короткий.");
valid=false;
}else{
if(document.getElementById("email").value==""){
alert("Пожалуйста заполните поле 'E-mail'.");
valid=false;
}else{
if(document.getElementById("email").value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/)==null){
alert("Неверный E-mail адрес.");
valid=false;
}else{
if(document.getElementById("password").value==""){
alert("Пожалуйста заполните поле 'Пароль'.");
valid=false;
}else{
if(document.getElementById("password").value.length<6){
alert("Пароль слишком короткий.");
valid=false;
}else{
if(document.getElementById("password1").value==""){
alert("Пожалуйста заполните поле 'Повтор пароля'.");
valid=false;
}else{
if(document.getElementById("password").value!=document.getElementById("password1").value){
alert("Поля 'Пароль' и 'Повтор пароля' не совпадают.");
valid=false;
}else{
if(document.getElementById("consent").checked==false){
alert("Чтобы зарегистрироваться необходимо согласиться с правилами.");
valid=false;
}
}
}
}
}
}
}
}
}
}
return valid;
}
</script>
Напишем функцию valid_key_number, которая будет проверять нажатые клавиши в поле "Телефон" и разрешать нажатие лишь цифр (код клавиш от 48 до 57) и нажатие Backspace (код клавиши - 8).
function valid_key_number(e){
e = (e) ? e : window.e;
w = (e.keyCode) ? e.keyCode : e.which;
if((w<48||w>57)&&w!=8) return false;
}
Итак, вот и все. Теперь соберем все что у нас есть и получим форму с разными проверками полей
<script type="text/javascript">
function valid_form(){
valid=true;
if(document.getElementById("name").value==""){
alert("Пожалуйста заполните поле 'Имя'.");
valid=false;
}else{
if(document.getElementById("name").value.length<2){
alert("Имя слишком короткое.");
valid=false;
}else{
if(document.getElementById("phone").value.length<9&&document.getElementById("phone").value!=""){
alert("Номер телефона слишком короткий.");
valid=false;
}else{
if(document.getElementById("email").value==""){
alert("Пожалуйста заполните поле 'E-mail'.");
valid=false;
}else{
if(document.getElementById("email").value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/)==null){
alert("Неверный E-mail адрес.");
valid=false;
}else{
if(document.getElementById("password").value==""){
alert("Пожалуйста заполните поле 'Пароль'.");
valid=false;
}else{
if(document.getElementById("password").value.length<6){
alert("Пароль слишком короткий.");
valid=false;
}else{
if(document.getElementById("password1").value==""){
alert("Пожалуйста заполните поле 'Повтор пароля'.");
valid=false;
}else{
if(document.getElementById("password").value!=document.getElementById("password1").value){
alert("Поля 'Пароль' и 'Повтор пароля' не совпадают.");
valid=false;
}else{
if(document.getElementById("consent").checked==false){
alert("Чтобы зарегистрироваться необходимо согласиться с правилами.");
valid=false;
}
}
}
}
}
}
}
}
}
}
return valid;
}
function valid_key_number(e){
e = (e) ? e : window.e;
w = (e.keyCode) ? e.keyCode : e.which;
if((w<48||w>57)&&w!=8) return false;
}
</script>
<form name="form" action="reg.php" method="post" onsubmit="return valid_form();">
Имя*:<br/><input type="text" name="name" id="name"/><br/>
Телефон:<br/><input type="text" name="phone" id="phone" onkeypress="return valid_key_number(event);"/><br/>
E-mail*:<br/><input type="text" name="email" id="email"/><br/>
Пароль*:<br/><input type="password" name="password" id="password"/><br/>
Повтор пароля*:<br/><input type="password" name="password1" id="password1"/><br/>
<input type="checkbox" name="consent" id="consent"/>Согласен с правилами регистрации*<br/>
<input type="submit" value="Зарегистрироваться"/>
</form>
Посмотреть как работает данный код можно
ТУТ.
Надеюсь вам пригодится данная статья.
При копировании статьи не забывайте оставлять ссылку на данную страницу.
