PHP: Проверка формы при помощи jQuery (на стороне клиента) в PHP
Проверка формы jQuery (проверка на стороне клиента) в PHP; В этом руководстве; вы узнаете, как использовать проверку jQuery или проверку на стороне клиента с PHP Forms с использованием библиотеки проверки jQuery.
В этом руководстве будет создана простая форма обратной связи и добавлена проверка на стороне клиента в PHP MySQL с использованием библиотеки проверки на стороне клиента jQuery.
Простая проверка формы jQuery (на стороне клиента) в PHP + MySQL
Шаг 1 - Создайте проект PHP
Прежде всего, посетите каталог вашего веб-сервера и создайте каталог php с названием demo.
Шаг 2 - Создайте таблицу в базе данных
Создайте таблицу в своей базе данных. Для этого посетите свой PHPMyAdmin и создайте таблицу с именем contacts_list со следующими полями: name, email, mobile.
CREATE TABLE `contacts_list` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(50) NOT NULL,
`subject` varchar(255) NOT NULL,
`Message` text NOT NULL,
`sent_date` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;Шаг 3 - Создайте файл подключения к базе данных
Создайте файл с именем db.php и обновите приведенный ниже код в созданном файле.
<?php
$servername='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>Приведенный выше код используется для создания подключения к базе данных MySQL в PHP. Когда мы вставляем данные формы в базу данных MySQL, мы включаем туда этот файл.
Шаг 4 - Создайте HTML-форму
Создайте простую HTML-форму и добавьте следующий код в файл contact-form.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contact Form in PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
.container {
max-width: 500px;
margin: 50px auto;
text-align: left;
font-family: sans-serif;
}
form {
border: 1px solid #1A33FF;
background: #ecf5fc;
padding: 40px 50px 45px;
}
.form-control:focus {
border-color: #000;
box-shadow: none;
}
label {
font-weight: 600;
}
.error {
color: red;
font-weight: 400;
display: block;
padding: 6px 0;
font-size: 14px;
}
.form-control.error {
border-color: red;
padding: .375rem .75rem;
}
</style>
</head>
<body>
<div class="container mt-5">
<?php
include('db.php');
if (!empty($_POST["send"])) {
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$subject = $_POST["subject"];
$message = $_POST["message"];
// Хранить данные в базе данных
$sql = $connection->query("INSERT INTO contacts_list(name, email, phone, subject, message, sent_date) VALUES ('{$name}', '{$email}', '{$phone}', '{$subject}', '{$message}', now())");
}
?>
<!-- Message -->
<?php if (!empty($response)) { ?>
<div class="alert text-center <?php echo $response['status']; ?>" role="alert">
<?php echo $response['message']; ?>
</div>
<?php } ?>
<!-- Message -->
<?php if (!empty($response)) { ?>
<div class="alert text-center <?php echo $response['status']; ?>" role="alert">
<?php echo $response['message']; ?>
</div>
<?php } ?>
<!-- Contact form -->
<form action="" name="contactForm" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" name="phone" id="phone">
</div>
<div class="form-group">
<label>Subject</label>
<input type="text" class="form-control" name="subject" id="subject">
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" name="message" id="message" rows="4"></textarea>
</div>
<input type="submit" name="send" value="Send" class="btn btn-dark btn-block">
</form>
</div>
</body>
</html>Шаг 5 - Добавьте проверку на стороне клиента в форму
Для того, чтобы добавить проверку на стороне клиента в формы PHP Html, добавьте библиотеку проверки jQuery на стороне клиента и реализуйте код проверки jQuery с формами PHP; как показано ниже:
<!-- jаvascript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
<script>
$(function() {
$("form[name='contactForm']").validate({
// Определите правила проверки
rules: {
name: "required",
email: "required",
phone: "required",
subject: "required",
message: "required",
name: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
minlength: 10,
maxlength: 10,
number: true
},
subject: {
required: true
},
message: {
required: true
}
},
// Укажите сообщения об ошибках проверки
messages: {
name: "Укажите действительное имя",
email: {
required: "Пожалуйста, введите ваш адрес электронной почты",
minlength: "Пожалуйста, введите действительный адрес электронной почты"
},
phone: {
required: "Укажите номер телефона",
minlength: "Номер телефона должен состоять не менее чем из 10 символов",
maxlength: "Номер телефона не должен содержать более 10 символов"
},
subject: "Пожалуйста, укажите тему",
message: "Пожалуйста, введите ваше сообщение"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>Проверка на стороне клиента в PHP MySQL с использованием проверки jQuery; В этом руководстве вы узнали, как добавить проверку на стороне клиента с помощью форм PHP с помощью библиотеки проверки jQuery.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.