Javascript phía máy chủ mongodb

Chúng tôi sẽ học cách xác thực các biểu mẫu của bạn bằng PHP và jQuery ở cả hai bên. phía máy khách [sử dụng JavaScript với jQuery] và phía máy chủ [sử dụng PHP]. Sẽ rất thú vị khi xem cách sử dụng các biểu thức chính quy để xác nhận các loại e-mail, mật khẩu khác nhau và nhiều hơn nữa

Giới thiệu

Như bạn đã biết, chúng tôi đang hỏi bạn & nbsp;

Về các đề xuất này là về   . cách xác thực biểu mẫu ở phía máy chủ bằng PHP, vì vậy trong hướng dẫn này, chúng tôi sẽ sử dụng PHP và jQuery để xác thực tất cả các trường ở cả hai bên

• Phía sau khách hàng. Sử dụng JavaScript với   . Sử dụng javascript với jQuery
• Phía sau máy chủ. Sử dụng PHP. Sử dụng PHP

Chúng tôi sẽ sử dụng các biểu thức thông thường và nếu bạn không biết về chúng, bạn sẽ sớm nhận ra sức mạnh của họ. Nhân tiện ích, bạn có thể kiểm tra  

Vào cuối hướng dẫn, & nbsp; . chúng tôi sẽ nhận được một ví dụ hoạt động thực tế cuối cùng sẽ xác thực các trường của chúng tôi có/không bật javascript nhưng luôn sử dụng trình xác thực phía máy chủ

Hãy cùng đi sâu vào hướng dẫn

Bước 1. Cách tiếp cận đầu tiên đối với XHTML cục bộ

Trong trường hợp này, chúng tôi sẽ tạo một đơn giản HTML bố cục đơn giản hiển thị biểu mẫu của chúng tôi. Trong thời gian gần đầu tiên, HTML sẽ trông giống như thế này

	
	yensdesign.com - Validate Forms using PHP and jQuery
	


	
	

		
Registration process
			

				

					
Invalid Name: We want names with more than 3 letters!
					
Invalid E-mail: Stop cowboy! Type a valid e-mail please :P
					
Passwords are invalid: Passwords doesn't match or are invalid!
					
Ivalid message: Type a message with at least with 10 letters
				
			
			

				

					
Congratulations! All fields are OK ;]
				
			

		
			

				Name
				
				What's your name?
			
			

				E-mail
				
				Valid E-mail please, you will need it to log in!
			
			

				Password
				
				At least 5 characters: letters, numbers and '_'
			
			

				Confirm Password
				
				Confirm password
			
			

				Message
				
			
			

				
			
		
	
	
	

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 đã được hiển thị là mặc định, nhưng chúng tôi sẽ bổ sung 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

• #Thùng đựng hàng. Chứa tất cả các bộ phận. chứa tất cả các bộ phận
• #Lỗi. Chứa danh sách các lỗi có thể xảy ra sau khi gửi biểu mẫu. chứa một danh sách các lỗi có thể xảy ra sau khi gửi biểu mẫu
• #lỗi. có giá trị. chứa cụm từ chúc mừng. chứa “cụm từ chúc mừng” nếu tất cả đều ổn
• #Mẫu tùy chỉnh. Chứa biểu mẫu của chúng tôi & nbsp;. chứa hình thức của chúng tôi

Vì vậy, bây giờ chúng tôi đã có sẵn bố cục XHTML của chúng tôi, hãy bổ sung một số kiểu với CSS

Bước 2. Add type with CSS

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

@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;. các lớp lỗi mà chúng tôi sẽ sử dụng trong phần jQuery để làm cho hướng dẫn của chúng tôi trở nên thú vị và thân thiện hơn với người dùng

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; . Chúng tôi sẽ thêm / xóa một số lớp. Lỗi để thực hiện 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   . đọc lại[]   . js & nbsp; . $[tài liệu]. ready[] của jQuery và tất cả sẽ là một phần của tệp javascript có tên validation. js [bản gốc, hả?]

Vì vậy, hãy để Lừa lưu & nbsp; . tham chiếu đến một số phần tử DOM mà chúng tôi thường

//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 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

• Xác thựcMail []. Chúng tôi chỉ cho phép email hợp lệ. chúng tôi chỉ cho phép các email hợp lệ
• Tên xác thực []. Chúng tôi chỉ cho phép các tên có hơn 3 chữ cái. chúng tôi chỉ cho phép tên có hơn 3 chữ cái
• Xác thựcPass1 []. Chúng tôi chỉ cho phép mật khẩu có ít nhất 5 ký tự. chúng tôi chỉ cho phép mật khẩu có ít nhất 5 ký tự
• Xác thựcPass2 []. Chúng tôi chỉ cho phép nếu mật khẩu bằng nhau. chúng tôi chỉ cho phép nếu mật khẩu bằng nhau
• Thông báo xác thực []. Chúng tôi chỉ tin nhắn với hơn 10 chữ cái. chúng tôi chỉ nhắn tin với hơn 10 chữ cái

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