Cách kiểm tra xem email đã tồn tại trong cơ sở dữ liệu bằng javascript chưa
Trong form đăng ký chủ yếu ở web 2. 0, địa chỉ email được yêu cầu để đăng ký cho mỗi người dùng. Trong biểu mẫu đăng ký, chúng tôi cần kiểm tra địa chỉ email từ cơ sở dữ liệu bằng Ajax để tránh trùng lặp email và biểu mẫu cho người dùng biết email đã nhập là tồn tại và chúng tôi cần thay đổi địa chỉ email
Trong hướng dẫn này, chúng tôi tạo một biểu mẫu đăng ký đơn giản cho bản demo và chúng tôi sử dụng jQuery Ajax để yêu cầu email đến cơ sở dữ liệu, nếu đã tồn tại
Chúng tôi sử dụng Ajax thay vì PHP thuần túy, vì Ajax có thể nói chuyện với cơ sở dữ liệu mà không cần tải lại trình duyệt. Chúng tôi có thể gửi dữ liệu từ biểu mẫu đăng ký và đăng dữ liệu lên tệp yêu cầu. Một số trang web sử dụng Ajax trong biểu mẫu đăng ký để xác minh email người dùng hoặc tên người dùng tồn tại
Xem bản giới thiệu
[email protected]
Bên dưới thẻ tiêu đề, chúng tôi bao gồm biểu định kiểu 'kiểu. css’ và tập lệnh jQuery trực tiếp từ google cdn và cuối cùng là tập lệnh jQuery
phong cách/phong cách. css
body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
color:#464646
}
h1 {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
margin-left: 25px;
}
p {
margin:10px;
padding:10px;
color:#000000;
}
table#table_data {
margin-left: 25px;
}
form#mainform input[type="text"] {
border: 1px solid #E5E5E5;
margin-bottom: 3px;
padding: 5px;
}
form#mainform input[name="register"] {
border: 1px solid #BBBBBB;
border-radius: 12px 12px 12px 12px;
color: #464646;
cursor: pointer;
font-size: 13px;
margin-top: 10px;
padding: 3px 8px;
}
form#mainform input[name="register"]:hover {
border: 1px solid #666666;
}
div#note {
margin-left: 25px;
margin-top: 25px;
}
span.validation {
font-style:italic;
color:#B41F2B;
}
span.loading {
font-style: italic;
left: 5px;
position: relative;
}
Bước 4. Tạo tập lệnh jQuery Ajax
js/tập lệnh. js
jQuery[function[$] {
var val_holder;
$["form input[name='register']"].on['click', function[] {
// form validation
val_holder = 0;
var fname = jQuery.trim[$["form input[name='fname']"].val[]]; // first name field
var lname = jQuery.trim[$["form input[name='lname']"].val[]]; // last name field
var email = jQuery.trim[$["form input[name='email']"].val[]]; // email field
var email_regex = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // reg ex email check
if[fname == ""] {
$["span.fname_val"].html["This field is empty."];
val_holder = 1;
}
if[lname == ""] {
$["span.lname_val"].html["This field is empty."];
val_holder = 1;
}
if[email == ""] {
$["span.email_val"].html["This field is empty."];
val_holder = 1;
}
if[email != ""] {
if[!email_regex.test[email]]{ // if invalid email
$["span.email_val"].html["Your email is invalid."];
val_holder = 1;
}
}
if[val_holder == 1] {
return false;
}
val_holder = 0;
// form validation end
// start
$["span.loading"].html[""];
$["span.validation"].html[""];
var datastring = 'fname='+ fname +'&lname='+ lname +'&email='+ email;
//var datastring = $['form#mainform'].serialize[]; // or use serialize
$.ajax[{
type: "POST", // type
url: "check_email.php", // request file the 'check_email.php'
data: datastring, // post the data
success: function[responseText] { // get the response
if[responseText == 1] { // if the response is 1
$["span.email_val"].html[" Email are already exist."];
$["span.loading"].html[""];
} else { // else blank response
if[responseText == ""] {
$["span.loading"].html[" You are registred. redirecting..."];
$["span.validation"].html[""];
$["form input[type='text']"].val['']; // optional: empty the field after registration
// your redirect code here
}
}
},
timeout: 20000, // timeout if 20 secs
error: function [jqXHR, textStatus, errorThrown] {
switch[textStatus] {
case "timeout": // connection timeout handler
alert['Connection Timeout, Please reload the page.'];
break;
case "error":
alert['Connection Error, Please reload the page.']; // connection 404 handler
break;
default:
alert[textStatus];
}
}
}]; // ajax end
}]; // click end
}];
Trong tập lệnh jQuery, trước tiên chúng tôi tạo biểu mẫu xác thực đơn giản cho người dùng không nhập dữ liệu. Trong Ajax có 4 tham số… type, url, data và return thành công
Bước 5. Tệp yêu cầu Ajax
Chúng tôi kết nối với cơ sở dữ liệu mysql trước, sau đó gửi dữ liệu qua Ajax, chúng tôi bắt dữ liệu bài đăng và xử lý truy vấn MySQL và gửi lại yêu cầu và Ajax bắt lại yêu cầu
kiểm tra email. php