Проверка полей с помощью JQuery VALIDATE
Простой пример проверки заполнения полей с помощью JQuery validate
Рассмотрим простой пример:
Подключаем нужные файлы:
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/myscripts.js"></script>
Подключаем библиотеку JQuery, плагин JQuery Validation и файл, где мы будем писать свой код для проверки.
Вот HTML код с нашем формой:
<form id="loginform" action="" method="post">
Ваш логин:
<input type="text" name="login" />
Ваш пароль:
<input type="password" name="pswd" />
<input type="submit" name="enter" value="Войти" /></form>
И вот файл myscripts.js с нашим кодом проверки форм:
$(document).ready(function(){
$("#loginform").validate({
rules:{
login:{
required: true,
minlength: 4,
maxlength: 16,
},
pswd:{
required: true,
minlength: 6,
maxlength: 16,
},
},
messages:{
login:{
required: "Это поле обязательно для заполнения",
minlength: "Логин должен быть минимум 4 символа",
maxlength: "Максимальное число символо - 16",
},
pswd:{
required: "Это поле обязательно для заполнения",
minlength: "Пароль должен быть минимум 6 символа",
maxlength: "Пароль должен быть максимум 16 символов",
},
}
});
});
Чтобы менять внешний вид сообщений об ошибке, нужно в файле CSS работать с классом .error
Например:
.error{ color: red; }
Список правил:
- required – поле обязательное для заполнения (true или false)
- remote – указывается файл для проверки поля (например: check.php)
- email – проверяет корректность e-mail адреса (true или false)
- url – проверяет корректность url адреса (true или false)
- date – проверка корректности даты (true или false)
- dateISO – проверка корректности даты ISO (true или false)
- number – проверка на число (true или false)
- digits – только цифры (true или false)
- creditcard – корректность номера кредитной карты (true или false)
- equalTo – равное чему-то (например другому полю equalTo:”#pswd”)
- accept – проверка на правильное расширение (accept: “xls|csv”)
- maxlength – максимальное кол-во символов (число)
- minlength – минимальное кол-во символов (число)
- rangelength – кол-во символов от скольки и до скольки (rangelength: [2, 6])
- range – число должно быть в диапазоне от и до (range: [13, 23])
- max – максимальное значение числа (22)
- min – минимальное значение числа (11)