Validate form sử dụng Regular Expression

Bài viết Validate form sử dụng Regular Expression Aki sẽ hướng dẫn các bạn cách sử dụng Regular Expression để giải quyết bài toán validate form trong thực tế

Xây dựng một giao diện form gồm các thành phần email, username, password và địa chỉ website (như hình vẽ) Người dùng tiến hành nhập đầy đủ các thông tin của form, nếu thông tin nào người dùng nhập không đúng yêu cầu sẽ có thông báo lỗi xuất hiện ở phía dưới.

Validate form sử dụng RE

Về sự ràng buộc của các phần tử trên form, chúng ta có thông tin như sau:

Email

• Địa chỉ email phải bắt đầu bằng một ký tự.
• Địa chỉ email là tập hợp của các ký tự a-z, 0 đến 9 và có thể có các ký tự như dấu chấm ( . ), dấu gạch dưới ( _ )
• Độ dài tối thiểu của email là 5 ký tự và độ dài tối đa là 32 ký tự
• Tên miền của email có thể là tên miền cấp 1 hoặc tên miền cấp 2

Username

• Tên đăng nhập phải bắt đầu bằng một ký tự hoặc dấu gạch dưới
• Tên đăng nhập là tập hợp của các ký tự a-z, 0-9 và có thể có các ký tự như dấu chấm ( . ), dấu gạch dưới ( _ ), khoảng trắng
• Độ dài tối thiểu của tên đăng nhập là là 5 ký tự và độ dài tối đa là 32 ký tự

Password

• Mật khẩu là tập hợp của các ký tự a-z, 0-9 có thể có các ký tự như dấu chấm ( . ), dấu gạch dưới ( _ ) và các ký tự đặc biệt
• Mật khẩu phải có chiều dài 8 ký tự
• Phải tồn tại ít nhất 1 ký tự đặc biệt, 1 ký tự in hoa và 1 chữ số nào đó

Website phải tuân theo các dạng sau

• http://www.abc.vn
• https://www.abc.vn.vn
• http://abc.vn
• https://abc.vn
• www.abc.vn

Mã nguồn tập tin style.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143

*{ margin: 0px; padding: 0px; }   body { margin: 0; padding: 0; background: #f4f4f4; font: 14px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }   .wrapper { width: 960px; margin: 50px auto; }   .form1 { width: 450px; background: #fff; color: #777; -webkit-box-shadow: 0px 0px 8px 2px #d1d1d1; -moz-box-shadow: 0px 0px 8px 2px #d1d1d1; box-shadow: 0px 0px 8px 2px #d1d1d1; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; overflow: hidden; margin: auto; }   .formtitle { padding: 10px; line-height: 16px; font-size: 13px; text-shadow: -1px -1px #e87c19; color: #fff; font-weight: bold; border-bottom: 1px solid #eb8d19; width: 430px; background: #ffbd27; /* Old browsers */ background: -moz-linear-gradient(top, #ffbd27 0%, #ffb119 50%, #ff9d19 51%, #ff9d19 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbd27), color-stop(50%,#ffb119), color-stop(51%,#ff9d19), color-stop(100%,#ff9d19)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd27', endColorstr='#ff9d19',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* W3C */ }   .input { width: 410px; border-bottom: 1px solid #ddd; margin-bottom: 10px; margin: 20px; overflow: hidden; }   .inputtext { float: left; line-height: 18px; height: 35px; font-size: 14px; width: 120px; }   .inputcontent { float: left; width: 290px; height: auto; min-height: 50px; }   .inputcontent input { padding: 5px; height: 18px; width: 200px; line-height: 18px; border: 1px solid #c7c7c7; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; color: #777; }   .inputcontent p{ margin: 5px; font-size: 12px; font-style: italic; color: red; }   .nobottomborder { border-bottom: 0; }   .buttons { background: #f1f1f1; border-top: 1px solid #ddd; padding: 15px; height: 34px; }   .orangebutton { background: #ffc339; /* Old browsers */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc339), color-stop(100%,#ff9b19)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Chrome10+,Safari5.1+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc339', endColorstr='#ff9b19',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* W3C */ border: 1px solid #ff9b19; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; line-height: 20px; font-size: 16px; padding: 6px 12px; color: #fff; text-shadow: -1px -1px #ff9b19; float: right; margin-left: 10px; cursor: pointer; }   .orangebutton:hover{ background: #ff9b19; /* Old browsers */ background: -moz-linear-gradient(top, #ff9b19 0%, #ffc339 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9b19), color-stop(100%,#ffc339)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9b19', endColorstr='#ffc339',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* W3C */ }

Mã nguồn tập tin functions.php (chứa các hàm xử lý)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

function checkInput($value, $type = 'email'){ switch ($type) { case 'email': $pattern = '#^[a-z][a-z0-9_\.]{4,31}@[a-z0-9]{2,}(\.[a-z0-9]{2,4}){1,2}$#'; break; case 'username': $pattern = '#^[a-z_][a-z0-9_\.\s]{4,31}$#'; break; case 'password': $pattern = '#^(?=.*\d)(?=.*[A-Z])(?=.*\W).{8,8}$#'; break; case 'website': $pattern = '#^(https?://(www\.)?|(www\.))[a-z0-9\-]{3,}(\.[a-z]{2,4}){1,2}$#'; break; } $flag = preg_match($pattern, $value); return $flag; }   function createInput($class = 'input', $name = 'Username', $input, $error){   $xhtml = '<div class="'.$class.'"> <div class="inputtext">'.$name.'</div> <div class="inputcontent"> '.$input.$error.' </div> </div>'; return $xhtml; }

Mã nguồn tập tin index.php (chứa giao diện form và gọi các hàm xử lý)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Register Form</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <?php require_once 'functions.php'; if(!empty($_POST)){ $error = array();   // email $email = $_POST['email']; if(trim($email)==''){ $error['email'] = '<p>Giá trị không được rỗng</p>'; }else { if(checkInput($email, 'email')==false){ $error['email'] = '<p>Giá trị này không hợp lệ</p>'; $email = ''; } }   // Username $username = $_POST['name']; if(trim($username)==''){ $error['name'] = '<p>Giá trị không được rỗng</p>'; }else { if(checkInput($username, 'username')==false){ $error['name'] = '<p>Giá trị này không hợp lệ</p>'; $username = ''; } }   // Passworld $password = $_POST['password']; if(trim($password)==''){ $error['password'] = '<p>Giá trị không được rỗng</p>'; }else { if(checkInput($password, 'password')==false){ $error['password'] = '<p>Giá trị này không hợp lệ</p>'; $password = ''; } }   // Website $website = $_POST['website']; if(trim($website)==''){ $error['website'] = '<p>Giá trị không được rỗng</p>'; }else { if(checkInput($website, 'website')==false){ $error['website'] = '<p>Giá trị này không hợp lệ</p>'; $website = ''; } } } $strEmail = createInput('input', 'Email', '<input type="text" name="email" value="'.$email.'"/>', $error['email']); $strUsername = createInput('input', 'Username', '<input type="text" name="name" value="'.$username.'"/>', $error['name']); $strPassword = createInput('input', 'Password', '<input type="password" name="password" value="'.$password.'"/>', $error['password']); $strWebsite = createInput('input nobottomborder', 'Website', '<input type="text" name="website" value="'.$website.'"/>', $error['website']); ?> <div class="wrapper"> <form class="form1" action="#" method="post"> <div class="formtitle">Login to your account</div> <?php echo $strEmail . $strUsername . $strPassword . $strWebsite; ?> <div class="buttons"> <input class="orangebutton" type="submit" value="Login" /> </div> </form> </div> </body> </html>

Kết thúc bài viết Validate form sử dụng Regular Expression các bạn đã biết cách khai thác Regular Expression để giải quyết bài toán validate là như thế nào. Như vậy các bạn đã thấy Regular Expression thật sự là một công cụ rất mạnh, việc nắm vững Regular Expression là một vấn đề thật sự cần thiết đối với bất kỳ lập trình viên nào.

Series Navigation