Необходимо на стороне клиента произвести первичную проверку корректности ввода данных.
Ниже пример простой формы регистрации.
<html>
<head>
<title>Регистрация</title>
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/jquery.validate.js" type="text/javascript"></script>
<script>
$(function(){
$("#reg-form").validate({ //находим форму по ее идентификатору
rules: { // здесь задаются правила валидации для каждого поля (ключ хеша - значение аттрибута name соответствующего input-а
pass1: {
required: true, //обязательное
minlength: 5, //ограничение на мин.длину
},
pass2: {
required: true,
minlength: 5,
equalTo: $("#id_pass1"), //проверяем, что второй пароль равен первому , используя jquery локатор для поиска нужного поля по его id
},
email: {
required: true,
email: true // проверка формата email (доступность домена не проверяется)
},
},
messages: { // здесь описываем какие сообщения об ошибках показывать после тех или иных проверок
email: {
required: 'Данное поле должно быть заполнено!',
email: 'Неправильный формат адреса e-mail',
},
pass1: {
required: 'Данное поле должно быть заполнено!',
minlength: 'Минимальная длина пароля: 5',
},
pass2: {
required: 'Данное поле должно быть заполнено!',
minlength: 'Минимальная длина пароля: 5',
equalTo: 'Введенные пароли не совпадают',
},
},
success: function(label) {//плагин-валидатор для сообщений об ошибках использует по-умолчанию элемент label
// здесь указываем код, который должен быть выполнен после успешной валидации поля
//удаляем класс error и добавляем класс ok
//плагин-валидатор по-умолчанию добавляет класс error для элементов, которые использует для сообщений об ошибках, поэтому сделайте поддержку соответствующих классов в своем css
label.html('OK').removeClass('error').addClass('ok');
}
});
});
</script>
</head>
<body>
<form action="" method="post" id="reg-form">
<label for="id_email">email:</label><input type="text" name="email" id="id_email">
<label for="id_pass1">пароль 1:</label><input type="password" name="pass1" id="id_pass1">
<label for="id_pass2">пароль 2:</label><input type="password" name="pass2" id="id_pass2">
<input type="submit" name="submit">
</form>
</body>
Плагин валидации поддерживает следующие правила проверки:
...
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
...
Если очень нужно, то при желании можно запилить в код плагина любые другие собственные проверки.
p.s. ну и , конечно же, проверив данные на стороне клиента не забываем делать это и на стороне сервера.
