Данные, вводимые пользователем при заполнении форм, обязательно! необходимо проверять на стороне сервера, но что делать, когда нам необходимо проверить не занят ли логин или же не зарегистрирован ли пользователь с таким e-mail адресом, да и вообще корректно ли заполнены поля, все это легко организовать используя библиотеку jquery.validate.
В этой статье я рассмотрю как организовать проверку:
-Логина на занятость
-Корректность ввода e-mail и доступность для регистрации
-Корректность ввода пароля
Рассмотрим использование компонента jQuery Validation на примере формы регистрации. Для начала создаем файл registration.php с формой регистрации:
Для начала подключим jQuery и плагин Validate:
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>
Каждый элемент input или select имеет «свой» элемент label с атрибутом for, значение которого одинаково со значением атрибута id соответствующего элемента input или select.
<label id="lusername" for="username">Логин:</label> <input id="username" name="username" type="text" value="" maxlength="50">
Теперь подключаем основной файл с инициализацией и методами проверки полей формы:
<script type="text/javascript" src="main.js"></script>
Разберемся что к чему:
$.validator.methods.equal = function(value, element, param) {
return value == param;
};
jQuery.validator.addMethod("nowhitespace", function(value, element) {
return this.optional(element) || /^S+$/i.test(value);
}, "Пробелов не должно быть");
Задаем два метода для сравнения и проверки на ввод пробелов, вообще методов достаточно много подробную информацию по методам jQuery validation смотрите в мануале.
var validator = $("#RegForm").validatevalidate({
// список опций
});
validate — основной метод который может принимать огромное количество опций, он устанавливает обработчики событий для submit, focus, keyup, blur и click, чтобы переключиться в проверку всей формы или ее отдельных полей.
rules - правила проверки формы, записываются в виде ключ:значение:
rules: {
username: { //правило для элемента с заданным name = username
required: true, //обязательно для заполнения
rangelength: [5, 19], //мин. и макс. количество символов
nowhitespace: true,
remote: {url: "check.php?type=check_login",
type:"post"
}
},
Приведенный пример правила описывает проверку поля username (логин пользователя), с помощью метода remote компонента jQuery validation.
Метод remote с помощью переменной url задает скрипт, в котором будет осуществляться проверка, переменная type задает метод передачи данных.
А сейчас рассмотрим самое интересное — серверный скрипт check.php, в котором осуществляется проверка введенных данных.
Для начала необходимо подключить файлик dbconnect.php, для установки соединения с базой данных.
Напишем простенькую функцию check_login - проверка логина на занятость:
function check_login($username) {
$login = mysql_real_escape_string(htmlspecialchars(trim($username)));
if(!preg_match("/^[a-zA-Z0-9_-]+$/", $login)) {
$error = 'false';
}
else {
$query = ("SELECT id FROM users WHERE login='$login'");
$sql = mysql_query($query) or die("Косяк");
if (mysql_num_rows($sql) > 0) {
$error = 'false';
} else {
$error = 'true';
}
}
echo $error;
}
Ну, тут вроде все просто — подключаемся, выполняем запрос к базе данных, существует ли пользователь с логином $login в таблице users и если запрос вернул не нуль, выводим ошибку(false) или же true, если логин свободен.
Теперь немного усовершенствуем наш remote скрипт, как вы заметили я использовал параметр type=check_login, для чего?
Всего лишь для того, чтобы кроме логина также проверять email, итак добавим проверку переменной $_GET[' type'] и еще парочку украшательств, ведь нам не нравиться сообщения об ошибке по умолчанию ;)
if($_GET['type'] == "check_login"){
if(isset($_POST['username'])) { check_login($_POST['username']); }
}
function check_login($username) {
$login = mysql_real_escape_string(htmlspecialchars(trim($username)));
if(!preg_match("/^[a-zA-Z0-9_-]+$/", $login)) {
$error = '"Введен недопустимый символ. Разрешены только английские буквы и цифры"';
}
else {
$query = ("SELECT id FROM users WHERE login='$login'");
$sql = mysql_query($query) or die("Косяк");
if (mysql_num_rows($sql) > 0) {
$error = '"Логин занят, выберите себе другой."';
} else {
$error = 'true';
}
}
echo $error;
}