Hướng dẫn server side validation in php using jquery - xác thực phía máy chủ trong php bằng cách sử dụng jquery

Như bạn có thể thấy, chúng tôi đã tạo ra tất cả các bộ phận sẽ xuất hiện [hoặc không] trong hướng dẫn của chúng tôi. Một số bộ phận này đã giành được hiển thị là mặc định, nhưng chúng tôi sẽ thêm một số điều kiện trong PHP và CSS để có được điều này. Vì vậy, đây là những bộ phận:

• #Container: Chứa tất cả các bộ phận: contains all divisions
• #Error: Chứa danh sách các lỗi có thể xảy ra sau khi gửi biểu mẫu: contains a list of possible errors after submitting the form
• #error.valid: chứa cụm từ chúc mừng: contains the “congratulations phrase” if all it’s OK
• #CustomForm: Chứa biểu mẫu của chúng tôi & nbsp;: contains our form 

Vì vậy, bây giờ chúng tôi đã sẵn sàng bố trí XHTML của chúng tôi, hãy để thêm một số kiểu với CSS.

Bước 2: Thêm kiểu với CSS

Nó sẽ là những người nhanh chóng, chỉ cần xem & nbsp; General.css & nbsp; mã: mã:general.css code:

@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h2, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
	background: #fff;
	line-height:14px;
	font-size: 12px;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	margin:0pt;
	cursor:default;
	overflow: hidden;
}
html,body{
	height:100%;
	text-align: center;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
a{
	text-decoration: none;
}
strong{
	font-weight: 700;
}
/******* GENERAL RESET *******/
h2{
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2em;
	border-bottom: 1px dotted #6b9ef1;
	color: #5f95ef;
	margin-bottom: 1em;
}
/******* LOGO *******/
#logo{
	margin-top: 1em;
	display: block;
}
/******* /LOGO  *******/
/******* CONTAINER *******/
#container{
	width: 600px;
	margin: 40px auto;
	text-align: left;
}
/******* /CONTAINER *******/
/******* FORM *******/
#customForm{
	padding: 0 10px 10px;
}
#customForm label{
	display: block;
	color: #797979;
	font-weight: 700;
	line-height: 1.4em;
}
#customForm input{
	width: 220px;
	padding: 6px;
	color: #949494;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	font-size: 11px;
	border: 1px solid #cecece;
}
#customForm input.error{
	background: #f8dbdb;
	border-color: #e77776;
}
#customForm textarea{
	width: 550px;
	height: 80px;
	padding: 6px;
	color: #adaeae;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	font-style: italic;
	font-size: 12px;
	border: 1px solid #cecece;
}
#customForm textarea.error{
	background: #f8dbdb;
	border-color: #e77776;
}
#customForm div{
	margin-bottom: 15px;
}
#customForm div span{
	margin-left: 10px;
	color: #b1b1b1;
	font-size: 11px;
	font-style: italic;
}
#customForm div span.error{
	color: #e46c6e;
}
#customForm #send{
	background: #6f9ff1;
	color: #fff;
	font-weight: 700;
	font-style: normal;
	border: 0;
	cursor: pointer;
}
#customForm #send:hover{
	background: #79a7f1;
}
#error{
	margin-bottom: 20px;
	border: 1px solid #efefef;
}
#error ul{
	list-style: square;
	padding: 5px;
	font-size: 11px;
}
#error ul li{
	list-style-position: inside;
	line-height: 1.6em;
}
#error ul li strong{
	color: #e46c6d;
}
#error.valid ul li strong{
	color: #93d72e;
}
/******* /FORM *******/

Như mọi khi, chúng tôi sử dụng đoạn CSS CSS Cool của chúng tôi và thêm một số phần thú vị vào hướng dẫn cụ thể.

Chỉ cần lưu ý rằng chúng tôi đã xác định một số lớp & nbsp;.error classes that we will use in the jQuery part to make our tutorial a little more cool and friendly user  

Phần tiếp theo, xác thực JavaScript!

Bước 3: Xác nhận ở phía khách hàng với jQuery

Vâng các bạn, bởi vì nó không thể là nếu không chúng tôi sẽ sử dụng & nbsp; jQuery & nbsp; để làm cho phần xác nhận ở phía khách hàng. Chúng tôi sẽ thêm / xóa một số lớp .Error để làm cho biểu mẫu của chúng tôi trực quan hơn một chút cho người dùng cuối cùng.

Vì vậy, trước hết, hãy nhớ rằng tất cả các mã sau đây sẽ nằm trong & nbsp; $ [tài liệu] .reetread [] & nbsp; của jQuery và tất cả sẽ là một phần của tệp javascript có tên & nbsp; xác thực.js & nbsp; [Bản gốc, uh?] .$[document].ready[] of jQuery and all will be a part of the javascript file named validation.js [original, uh?].

Vì vậy, hãy để Lừa lưu & nbsp; Tài liệu tham khảo & nbsp; đến & nbsp; một số & nbsp; Dom Elements & nbsp; mà chúng tôi sẽ thường xuyên:references to some DOM elements that we will often:

//global vars
var form = $["#customForm"];
var name = $["#name"];
var nameInfo = $["#nameInfo"];
var email = $["#email"];
var emailInfo = $["#emailInfo"];
var pass1 = $["#pass1"];
var pass1Info = $["#pass1Info"];
var pass2 = $["#pass2"];
var pass2Info = $["#pass2Info"];
var message = $["#message"];

Như bạn có thể nhận thấy, tất cả các tài liệu tham khảo đều liên quan đến hình thức.

Bây giờ, hãy để xác định các chức năng xác thực của chúng tôi sẽ giúp chúng tôi trong quá trình xác thực:

• ValidateMail []: Chúng tôi chỉ cho phép email hợp lệ!: we only allow valid emails!
• Validatename []: Chúng tôi chỉ cho phép các tên có hơn 3 chữ cái: we only allow names with more than 3 letters
• ValidatePass1 []: Chúng tôi chỉ cho phép mật khẩu có ít nhất 5 ký tự: we only allow passwords with at least 5 characters
• ValidatePass2 []: Chúng tôi chỉ cho phép nếu mật khẩu bằng nhau: we only allow it if passwords are equal
• Validatemessage []: Chúng tôi chỉ tin nhắn với hơn 10 chữ cái: we only messages with more than 10 letters

function validateName[]{
	//if it's NOT valid
	if[name.val[].length < 4]{
		name.addClass["error"];
		nameInfo.text["We want names with more than 3 letters!"];
		nameInfo.addClass["error"];
		return false;
	}
	//if it's valid
	else{
		name.removeClass["error"];
		nameInfo.text["What's your name?"];
		nameInfo.removeClass["error"];
		return true;
	}
}
function validatePass1[]{
	var a = $["#password1"];
	var b = $["#password2"];

	//it's NOT valid
	if[pass1.val[].length