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

Nội dung chính Show

Giới thiệu
Bước 1. Cách tiếp cận đầu tiên đối với XHTML cục bộ
Bước 2. Add type with CSS
Bước 3. Xác nhận phía khách hàng với jQuery
Bước 4. Xác nhận phía máy chủ với PHP
Bước 5. Kiểm tra xác thực mẫu tra cứu của chúng tôi
Làm thế nào để thực hiện xác thực phía máy chủ trong PHP?

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 <5){
		pass1.addClass("error");
		pass1Info.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
		pass1Info.addClass("error");
		return false;
	}
	//it's valid
	else{
		pass1.removeClass("error");
		pass1Info.text("At least 5 characters: letters, numbers and '_'");
		pass1Info.removeClass("error");
		validatePass2();
		return true;
	}
}
function validatePass2(){
	var a = $("#password1");
	var b = $("#password2");
	//are NOT valid
	if( pass1.val() != pass2.val() ){
		pass2.addClass("error");
		pass2Info.text("Passwords doesn't match!");
		pass2Info.addClass("error");
		return false;
	}
	//are valid
	else{
		pass2.removeClass("error");
		pass2Info.text("Confirm password");
		pass2Info.removeClass("error");
		return true;
	}
}
function validateMessage(){
	//it's NOT valid
	if(message.val().length < 10){
		message.addClass("error");
		return false;
	}
	//it's valid
	else{
		message.removeClass("error");
		return true;
	}
}

Như bạn có thể thấy, chúng tôi là & nbsp; . Các lớperror & nbsp; . thêm và xóa. các loại lỗi và thay đổi giá trị văn bản nếu cần để hiển thị cho người dùng trường nào sai

Bây giờ chúng tôi đã xác định tất cả các chức năng xác thực, chúng tôi chỉ cần & nbsp; . Ở đây bạn có những gì chúng ta sẽ làm. quản lý sự kiện. Ở đây bạn có những gì chúng ta sẽ làm

Xác thực & nbsp; . . trường tên trong. sự kiện blur và keyup
Xác thực & nbsp; . . trường email trong. làm mờ sự kiện
Xác thực & nbsp; . . các trường mật khẩu trong. sự kiện blur và keyup
Xác thực & nbsp; . . trường thông báo trong. sự kiện làm mờ và keyup
Xác thực & nbsp; . . tất cả các trường trong. gửi biểu mẫu sự kiện

Do that, code will be

//On blur
name.blur(validateName);
email.blur(validateEmail);
pass1.blur(validatePass1);
pass2.blur(validatePass2);
//On key press
name.keyup(validateName);
pass1.keyup(validatePass1);
pass2.keyup(validatePass2);
message.keyup(validateMessage);
//On Submitting
form.submit(function(){
	if(validateName() &amp; validateEmail() &amp; validatePass1() &amp; validatePass2() &amp; validateMessage())
		return true
	else
		return false;
});

Như bạn có thể thấy, nó rất dễ kiểm tra bất kỳ điều gì chúng tôi muốn bằng cách sử dụng jQuery và một số chức năng. Vì vậy, bây giờ chúng tôi đã thực hiện trang web của Khách hàng, hãy di chuyển sang phía máy chủ. hãy di chuyển đến phía máy chủ

Bước 4. Xác nhận phía máy chủ với PHP

Bây giờ chúng tôi đã thực hiện phía khách hàng, hãy sử dụng sức mạnh của PHP để hoàn thành hướng dẫn của chúng tôi

Một số bạn có thể & nbsp; . Hãy nhớ rằng . Trong ví dụ. . nghĩ rằng chúng ta không cần xác thực phía máy chủ nhưng đó là một lỗi lớn khi nghĩ về điều đó. Hãy nhớ rằng chúng ta không thể tin tưởng vào phía khách hàng. Trong ví dụ. người dùng có thể tắt javascript trong trình duyệt của họ và gửi cho chúng tôi các giá trị không mong muốn

Vì vậy, trước hết chúng tôi phải . php mới có tên . php . tệp php có tên xác thực. php sẽ chứa các chức năng xác thực của chúng tôi được viết bằng PHP

[email protected][a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$", $email);
	}
	function validatePasswords($pass1, $pass2) {
		//if DOESN'T MATCH
		if(strpos($pass1, ' ') !== false)
			return false;
		//if are valid
		return $pass1 == $pass2 &amp;&amp; strlen($pass1) > 5;
	}
	function validateMessage($message){
		//if it's NOT valid
		if(strlen($message) < 10)
			return false;
		//if it's valid
		else
			return true;
	}
?>

Như bạn có thể thấy, chúng tôi đã xác định 4 chức năng

Tên xác thực (). Kiểm tra xem tên có ít nhất 4 chữ cái không. kiểm tra xem tên có ít nhất 4 chữ cái
Xác thựcMail (). Check tra email has an invalid. kiểm tra xem email có hợp lệ không
Xác thực mật khẩu (). Kiểm tra xem mật khẩu có bằng nhau không và có ít nhất 5 chữ cái. kiểm tra xem mật khẩu có bằng nhau và có ít nhất 5 chữ cái không
Thông báo xác thực (). Kiểm tra xem tin nhắn có ít nhất 10 chữ cái không. kiểm tra xem tin nhắn có ít nhất 10 chữ cái không

Nó gần như đã thực hiện với các bạn, chúng tôi chỉ cần thêm một số điều kiện vào & nbsp; . php của chúng tôi. Nếu bạn nhớ, chúng tôi đã nói rằng chúng tôi sẽ bổ sung một số điều kiện trong PHP, vì vậy, đã đến lúc làm điều đó. mục lục. php. Nếu bạn còn nhớ, chúng tôi đã nói rằng chúng tôi sẽ thêm một số điều kiện vào PHP, vì vậy đã đến lúc làm điều đó

Chúng tôi sẽ & nbsp; . chỉ hiển thị phân chia #error nếu có ít nhất một lỗi
Chúng tôi sẽ & nbsp; . Bộ phận hợp lệ & nbsp; . hiển thị #lỗi. phân chia hợp lệ chỉ khi tất cả các trường đều ổn

Vì vậy, ở đây bạn có Final & nbsp; . php . mục lục. bố cục php

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

Bạn có thể thấy tôi có & nbsp; . php . php trước khi gọi các chức năng xác thực của chúng tôi và thêm một số lệnh gọi vào các chức năng xác thực của chúng tôi để kiểm tra các trường khi biểu mẫu được gửi

Chúng tôi đã sử dụng & nbsp; . ký hiệu ngắn PHP trong điều kiện để giữ cho HTML sạch hơn và dễ đọc hơn

Chúng tôi là & nbsp;

Bước 5. Kiểm tra xác thực mẫu tra cứu của chúng tôi

Đó là tất cả các chàng trai, tôi hy vọng bạn thấy nó hữu ích và sử dụng hướng dẫn này để cải thiện thêm một chút trang web của bạn

Hãy nhớ rằng . Trong Firefox, nó nằm trong các công cụ> Tùy chọn> Nội dung bỏ chọn hộp kiểm kích hoạt JavaScript JavaScript. nếu muốn dùng thử phía máy chủ, bạn cần tắt javascript trong trình duyệt web của mình. Trong Firefox, trong Công cụ > Tùy chọn > Nội dung bỏ chọn hộp kiểm “Bật Javascript”

Làm thế nào để thực hiện xác thực phía máy chủ trong PHP?

php if (isset ($_post ['gửi'])) { $ emp_name = trim ($_ post ["emp_name"]);$ emp_number = trim ($_ post ["emp_number"]);$ emp_email = trim . you are not input name. ";$code = "1";} otherif ($emp_number == "") {$ errorMsg = "lỗi. vui lòng nhập số. ";$code = "2";} //

programming javascript

Javascript phía máy chủ mongodb

Giới thiệu

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

Registration process

Bước 2. Add type with CSS

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

Bước 4. Xác nhận phía máy chủ với PHP

Bước 5. Kiểm tra xác thực mẫu tra cứu của chúng tôi

Làm thế nào để thực hiện xác thực phía máy chủ trong PHP?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội