NGUYỄN THỊ THÚY ANH Bài Tập 15-22

BÀI TẬP VỀ NHÀ
Họ và tên: Nguyễn Thị Thúy Anh

MSSV: 21086211
Bài 15:
* Kết quả:
- Hiển thị:
- Chạy thử:
* Mã nguồn:
<!DOCTYPE html>
<html>
<head>
<title>BÀI 15</title>
<style>
body {
font-family: 'Times New Roman', Times, serif;
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Email Validator</h1>
<input type="text" id="email-input" placeholder="Vui lòng nhập địa chỉ email của bạn">
<button onclick="validateEmail()">Validate</button>
<div id="result"></div>
<script>
function validateEmail() {
var emailInput = document.getElementById("email-input");
var email = emailInput.value.trim();
var emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (emailRegex.test(email)) {
document.getElementById("result").textContent = "Địa chỉ email hợp lệ";
document.getElementById("result").style.color = "green";
} else {
document.getElementById("result").textContent = "Địa chỉ email không hợp lệ";
document.getElementById("result").style.color = "red";
}
}
</script>
</body>
</html>
Bài 16:
* Kết quả:
- Hiển thị:
- Chạy thử:
* Mã nguồn:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
margin-top: 20px;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 4px;
width: 300px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
h1{
color: red;
}
#result {
font-weight: bold;
margin-top: 30px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>TRÌNH XÁC THỰC</h1>
<h3>IP Address</h3>
<input type="text" id="ip-input" placeholder="Vui lòng nhập địa chỉ IP">
<button onclick="validateIP()">Kiểm tra</button>
<div id="ip-result"></div>
<h3>URL</h3>
<input type="text" id="url-input" placeholder="Vui lòng nhập URL">
<button onclick="validateURL()">Kiểm tra</button>
<div id="url-result"></div>
<h3>US Zip Code</h3>
<input type="text" id="zip-input" placeholder="Vui lòng nhập mã zip US">
<button onclick="validateZipCode()">Kiểm tra</button>
<div id="zip-result"></div>
<script>
function validateIP() {
var ipInput = document.getElementById("ip-input");
var ip = ipInput.value.trim();
var ipRegex = /^(\b25[0-5]|\b2[0-4][0-9]|\b[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-
9]|[01]?[0-9][0-9]?)){3}$/;
if (ipRegex.test(ip)) {
document.getElementById("ip-result").textContent = "Địa chỉ IP hợp lệ";
document.getElementById("ip-result").style.color = "green";
} else {
document.getElementById("ip-result").textContent = "Địa chỉ IP không hợp lệ";
document.getElementById("ip-result").style.color = "red";
}
}
function validateURL() {
var urlInput = document.getElementById("url-input");
var url = urlInput.value.trim();
var urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
if (urlRegex.test(url)) {
document.getElementById("url-result").textContent = "URL hợp lệ";
document.getElementById("url-result").style.color = "green";
} else {
document.getElementById("url-result").textContent = "URL không hợp lệ";
document.getElementById("url-result").style.color = "red";
}
}
function validateZipCode() {
var zipInput = document.getElementById("zip-input");
var zipCode = zipInput.value.trim();
var zipRegex = /^\d{5}(?:[-\s]?\d{4})?$/;
if (zipRegex.test(zipCode)) {
document.getElementById("zip-result").textContent = "Mã ZIP US hợp lệ";
document.getElementById("zip-result").style.color = "green";
} else {
document.getElementById("zip-result").textContent = "Mã ZIP US không hợp lệ";
document.getElementById("zip-result").style.color = "red";
}
}
</script>
</body>
</html>
Bài 17:
* Kết quả:
- Hiển thị:
- Chạy thử:
+ Mật khẩu không khớp nhau:
+ Số điện thoại không hợp lệ:

+ Nhập email không đúng định dạng:
+ Không điền các trường bắt buộc

* Mã nguồn:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 600px;
margin: 0px auto;
justify-content: center;
text-align: center;
border-collapse: collapse;
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}
.left{
align-items: center;
width: 100px;
text-align: right;
}
.right{
width: 190px;
text-align: left;
}
td {
padding: 10px;
}
h2{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
.form-group {
height: 15px;
width: 300px;
display: flex;
margin-bottom: 15px;
}
.form-group label {
font-size: 3px;
flex-basis: 150px;
font-weight: bold;
}
.form-group input {
flex-grow: 1;
padding: 8px 10px;
border-radius: 4px;
}
.required-field {
color: red;
margin-left: 5px;
}
.btn {
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.btn-primary {
background-color: #007bff;
color: #fff;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary {
background-color: #6c757d;
color: #fff;
}
.btn-secondary:hover {
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2"><h2 >ĐĂNG KÝ TÀI KHOẢN</h2></td>
</tr>
<tr>
<td class = "left"><b>Tên đăng nhập:</b></td>
<td class = "right">
<div class="form-group">
<input type="text" id="username" name="username" placeholder="Nhập vào tên
đăng nhập" required>
<span class="required-field">*</span>
</div>
</td>
</tr>
<tr>
<td class = "left"><b>Mật khẩu:</b></td>
<input type="password" id="password" name="password" placeholder="Nhập vào
mật khẩu" required>
</div>
</td>
</tr>
<tr>
<td class = "left" ><b>Nhập mật khẩu:</b></td>
<input type="password" id="confirm-password" name="confirm-password"
placeholder="Nhập vào xác nhận mật khẩu" required>
</div>
</td>
</tr>
<tr >
<td colspan="2"><H3>THÔNG TIN CÁ NHÂN</H3></td>
</tr>
<tr>
<td class = "left"><b>Họ và tên:</b></td>
<input type="text" id="name" name="name" placeholder="Nhập vào họ tên"
required>
</div>
</td>
</tr>
<tr>
<td class = "left"><b>Ngày sinh:</b></td>
<input type="date" id="dob" name="dob" required>
</div>
</td>
</tr>
<tr>
<td class = "left"><b>Giới tính:</b></td>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male"><h6>Nam</h6></label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female"><h6>Nữ</h6></label>
</div>
</td>
</tr>
<tr>
<td class = "left"><b>Địa chỉ:</b></td>
<input type="text" id="address" name="address" placeholder="Nhập vào địa
chỉ" required>
</div>
</td>
</tr>
<tr>
<td class = "left"><b>Điện thoại:</b></td>
<input type="tel" id="phone" name="phone" placeholder="Nhập vào số điện
thoại (9-10 số)" pattern="[0-9]{9,10}" required>
</div>
</td>
</tr>
<tr>
<td class = "left"><b>Email</b></td>
<input type="email" id="email" name="email" placeholder="Nhập email"
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>
</div>
</td>
</tr>
<tr >
<td colspan="2">
<form onsubmit="return submitForm()">
<button type="submit" class="btn btn-primary">Đăng ký</button>
<button type="button" class="btn btn-secondary" onclick="return
submitForm()">Hủy</button>
</form>
</td>
</tr>
</table>
<script>
function checkPassword() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirm-password").value;
if (password !== confirmPassword) {
alert("Mật khẩu và xác nhận mật khẩu không khớp. Vui lòng kiểm tra lại.");
return false;
}
return true;
}
function validatePhone() {
var phone = document.getElementById("phone").value;
var phoneRegex = /^[0-9]{9,10}$/;
if (!phoneRegex.test(phone)) {
alert("Số điện thoại không hợp lệ. Vui lòng nhập số điện thoại từ 9 đến 10 chữ
số.");
return false;
}
return true;
}
var email = document.getElementById("email").value;
var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailRegex.test(email)) {
alert("Email không hợp lệ. Vui lòng nhập email đúng định dạng.");
return false;
}
return true;
}
function submitForm() {
// Check if all required fields are filled
if (
document.getElementById('username').value.trim() === '' ||
document.getElementById('password').value.trim() === '' ||
document.getElementById('confirm-password').value.trim() === ''
// ... (check other required fields) ...
) {
alert('Vui lòng điền vào những mục có dấu *');
return false;
}
// Perform password, phone, and email validation
if (!checkPassword() || !validatePhone() || !validateEmail()) {
return false;
}
// If all validations pass, submit the form
alert('Đăng ký thành công !');
return true;
}
</script>
</body>
</html>
Bài 18:
* Kết quả:
- Hiển thị:
- Chạy thử:
+ Tất cả đều đạt yêu cầu
+ Họ và tên không viết hoa

+ Nhập lại email không khớp:
+ Đặt mật khẩu không đúng yêu cầu:

+ Năm sinh không hợp lệ:
+ Nhập thiếu thông tin các trường bắt buộc:

* Mã nguồn:
<html>
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="Bài 18.css">
<style>
*{
padding: 0;
margin:0;
box-sizing:border-box;
font-family: 'Poppins', sans-serif;
}
#screen{
Width: 100%;
height: 100%;
padding: 0;
background-color: lightgray;
}
table{
width: 100%;
padding: 0px;
margin: 0px;
border: none;
}
td{
padding-left: 15px;
padding-top: 15px;
padding-bottom: 0;
font-size: 20px;
vertical-align: bottom;
}
h2{
color: gray;
}
.left{
width: 40%;
}
.right{
width: 60%;
padding-left: 100px;
text-align: left;
}
.form-group {
height: 30px;
width: 300px;
display: flex;
margin-bottom: 15px;
}
.form-group label {
font-size: 4px;
flex-basis: 150px;
font-weight: bold;
}
.form-group input {
flex-grow: 1;
padding: 8px 10px;
border: 1.5px solid #020000;
border-radius: 4px;
}
.logo{
text-align: left;
width: 1280px;
background: rgb(52, 52, 255);
color: white;
}
img{
height: 400px;
width: 350px;
}
.btn {
border: 1.5px solid black;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
width: 300px;
height: 25px;
}
.btn-primary {
background-color: #007bff;
color: #fff;
}
.btn-primary:hover {
}
</style>
</head>
<body>
<div id="screen">
<table>
<tr colspan="2" class="logo">
<td><h1>facebook</h1><td>
</tr>
<tr>
<td class ="left">
<table>
<tr>
<td><img src="Hình ảnh web/logo bài 18.jpg" alt=""></td>
</tr>
<tr>
<td><h2>Cảm ơn bạn đã ghé thăm!</h2></td>
</tr>
<tr>
<td><h5><b>Chúng tôi mong sớm gặp lại bạn.</b></h5></td>
</tr>
</table>
</td>
<td class="right">
<table>
<tr>
<td><h1><b>Đăng ký</b></h1></td>
</tr>
<tr>
<td><h5>Miễn phí và sẽ luôn như vậy.</h5></td>
</tr>
<tr>
<td>
<input type="text" name="Firstname" id="firstname"
placeholder="Họ" required>
<input type="text" name="Lastname" id="lastname"
placeholder="Tên" required>
</div>
</td>
</tr>
<tr>
<td>
<input type="email" id="email" name="email"
placeholder="Email đăng nhập" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
required>
</div>
</td>
</tr>
<tr>
<td>
<input type="confirm-email" id="confirm-email"
name="confirm-email" placeholder="Nhập lại email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-
9.-]+\.[a-zA-Z]{2,}" required>
</div>
</td>
</tr>
<tr>
<td>
<input type="password" id="password" name="password"
placeholder="Mật khẩu" required>
</div>
</td>
</tr>
<tr>
<td>
<input type="text" name="Birth" id="birth" placeholder="Năm
sinh" required>
</div>
</td>
</tr>
<tr>
<td>
<form onsubmit="return submitForm()">
<button type="submit" class="btn btn-primary">Đăng
ký</button>
</form>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
// Get the input values
const firstname = document.getElementById('firstname').value.trim();
const lastname = document.getElementById('lastname').value.trim();
const email = document.getElementById('email').value.trim();
const confirmEmail = document.getElementById('confirm-email').value.trim();
const password = document.getElementById('password').value.trim();
const birth = document.getElementById('birth').value.trim();
if (firstname === '' || lastname === '' || email === '' || confirmEmail === '' ||
password === '' || birth === '') {
alert('Vui lòng điền đầy đủ thông tin.');
return false;
}
// Check if firstname and lastname start with uppercase
if (!/^[A-Z]/.test(firstname) || !/^[A-Z]/.test(lastname)) {
alert('Họ và tên phải bắt đầu bằng chữ cái in hoa.');
return false;
}
// Check if email is valid
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
alert('Email không hợp lệ.');
return false;
}
// Check if confirm email matches
if (email !== confirmEmail) {
alert('Email nhập lại không khớp.');
return false;
}
// Check if password is valid (at least 6 characters, containing letters and
numbers)
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}$/;
if (!passwordRegex.test(password)) {
alert('Mật khẩu phải có ít nhất 6 ký tự, bao gồm chữ và số.');
return false;
}
// Kiểm tra năm sinh < 2002
const birthYear = parseInt(birth.slice(0, 4));
if (birthYear >= 2002) {
alert('Năm sinh phải nhỏ hơn 2002.');
return false;
}
// Nếu tất cả các trường đều hợp lệ, đăng ký thành công form
alert('Đăng ký thành công!');
return true;
}
</script>
</body>
</html>
Bài 19:
* Kết quả:
- Hiển thị:
* Mã nguồn:
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id="text">
<p>
Ở trong xã hội hiện đại, khi lòng người khó lường trước,
mọi quan hệ đều dựa trên lợi ích kinh tế thì lúc đấy tình
cảm lại chính là mắt xích giúp con người ta gắn kết với nhau,
giúp xã hội phát triển càng phát triển hơn.Tình cảm gia đình
là cao quý, vì vậy mỗi người cần phải ý thức và bảo vệ và xây
dựng tình cảm đẹp đẽ ấy. Đồng thời phê phán và lên án những
con người coi thường và không biết trân trọng tình cảm gia
đình, những người như thế một ngày nào đó sẽ nhận được hậu quả
thích đáng cho hành động của họ.
Mỗi một con người sẽ có một những chốn bình yên cho riêng mình,
đó có thể là tình bạn, cũng có thể là trong tình yêu và có
những người cho rằng chốn bình yên nhất là tình cảm gia đình.
Sau bao nhiêu gian lao, bão táp con người ta đều mong được về
bên gia đình để được yêu thương, an ủi.
</p>
<br>
<p>
Gia đình là hai tiếng thiêng liêng nhất của mỗi một con người
chúng ta. Gia đình chính là một quê hươngthu nhỏ của cuộc đời
của mỗi con người. Cho dù đi đâu thì vẫn khao khát và mong
ngóng được trở về đoàn tụ với gia đình của mình.
Chủ tịch Hồ Chí Minh kính yêu của non sông Việt Nam cũng đã
từng nói rằng “Gia đình là tế bào của xã hội”. Và ta như thấy
được câu nói đó thật ý nghĩa, đó là nơi nuôi dưỡng, chở che
cho mỗi chúng ta từ khi còn bé cho đến lúc lớn, nó luôn ở bên
cạnh ta, gia đình như cứ nâng niu che chở cho mỗi chúng ta.
Gia đình còn được xem chính là nơi nuôi dưỡng tâm hồn của mỗi
người. Dường như rằng tất cả chúng ta ai cũng đã, đang và sẽ
có một gia đình nhưng không phải ai ai cũng hiểu được tầm quan
trọng của gia đình là gì.Gia đình là nơi có những người thân
yêu ruột thịt của chúng ta. Nơi đó là một mái ấm có cả cha cả
mẹ,ông bà và cả anh chị em,…
</p>
</div>
<script>
function set_background(){
docBody = document.getElementsByTagName("body")[0];
//Get all the p elements that are descendants of the body
myBodyElements = docBody.getElementsByTagName("p");
//get the first p elements
myp1=myBodyElements[0];
myp1.style.background="lightpink";
//get the second p elements
myp2 = myBodyElements[1];
myp2.style.background = "lightblue";
}
set_background();
</script>
</BODY>
</HTML>
Bài 20:
* Kết quả:
- Hiển thị:
- Chạy thử:
* Mã nguồn:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table{
width: 80%;
}
.left{
width: 8%;
text-align: left;
padding-right: 10px;
font-weight: bold;
}
.right{
width: 60%;
}
select{
height: 28px;
width: 300px;
font-size: medium;
}
button{
height: 25px;
color: white;
background-color: black;
}
.table{
width: 70%;
border: 1px solid black;
}
th{
height: 25px;
}
.table table {
}
</style>
</head>
<body>
<table>
<tr>
<td class="left">Họ tên:
</td>
<td class="right"><input style="font-family:'Times New Roman', Times,
serif;font-size: medium; height: 23px; width: 293px;" type="text" id="name" name="name">
</td>
</tr>
<tr>
<td class="left">Lớp:</td>
<td class="right">
<form>
<select id="class" name="class">
<option>Đại học thương mại điện tử 17C</option>
<option>Khác</option>
</select>
</form>
</tr>
<tr>
<td class="left">Môn học:</td>
<td class="right">
<form>
<select id="subject" name="subject">
<option>Lập trình web</option>
<option>Khác</option>
</select>
</form>
</td>
</tr>
<tr>
<td class="left">Loại:</td>
<td class="right" style="text-align: left; height: 25px;">
<form>
<label>
<input type="radio" name="classk" value="Lý thuyết"> Lý thuyết
</label>
<label>
<input type="radio" name="classk" value="Thực hành"> Thực hành
</label>
</form>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 20px;"><button type="submit"
onclick="addToTable()">Đăng ký</button></td>
</tr>
<tr>
<table class="table">
<thead>
<tr>
<th>Họ tên</th>
<th>Lớp</th>
<th>Môn học</th>
<th>Loại</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</tr>
</table>
<script>
function addToTable() {
var name = document.getElementById("name").value;
var className = document.getElementById("class").value;
var subject = document.getElementById("subject").value;
var type = document.querySelector('input[name="classk"]:checked').value;
var row = document.createElement("tr");
var nameCell = document.createElement("td");
var classCell = document.createElement("td");
var subjectCell = document.createElement("td");
var typeCell = document.createElement("td");
nameCell.textContent = name;
classCell.textContent = className;
subjectCell.textContent = subject;
typeCell.textContent = type;
row.appendChild(nameCell);
row.appendChild(classCell);
row.appendChild(subjectCell);
row.appendChild(typeCell);
document.getElementById("tableBody").appendChild(row);
// Reset the form

document.getElementById("name").value = "";
document.getElementById("class").value = "";
document.getElementById("subject").value = "";
document.querySelector('input[name="classk"]:checked').checked = false;
}
</script>
</body>
</html>
Bài 21:
* Kết quả:
- Hiển thị:
- Chạy thử:
* Mã nguồn:
<HTML>
<HEAD>
<style>
tr td{
border: 1.5px solid black;
height: 30px;
}
table{
padding: 50px;
width: 50%;
}
img{
height: 100px;
padding-top: 5px;
padding-bottom: 5px;
}
.center{
text-align: center;
}
.padding{
padding-left: 10px;
}
input{
height: 25px;
}
</style>
</HEAD>
<BODY>
<table>
<tr style="text-align: center; font-size: medium; font-weight: bold;">
<td>STT</td>
<td>Hình ảnh</td>
<td>Giá</td>
<td>Số lượng</td>
</tr>
<tr>
<td style="text-align: center; font-weight: bold;">1</td>
<td class="center"><img src="Hình ảnh web/bo1.jpg"></td>
<td class="padding">20000 VND</td>
<td class="padding"><input type="text" id="quantity-1" name="SL"
onkeyup="updateTotalAmount()"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td></td>
<td></td>
<td class="padding" style="font-weight: bold; padding: 10px;">Tổng thành
tiền</td>
<td class="padding" id="total-amount">0 VND</td>
</tr>
</table>
<script>
function updateTotalAmount() {
var quantity1 = document.getElementById("quantity-1").value;
var price1 = 20000;
var price2 = 40000;
var price3 = 30000;
var price4 = 50000;
var price5 = 30000;
var totalAmount = (quantity1 * price1) + (quantity2 * price2) + (quantity3 * price3)
+ (quantity4 * price4) + (quantity5 * price5);
document.getElementById("total-amount").textContent = totalAmount.toLocaleString() +
" VND";
}
</script>
</BODY>
</HTML>
Bài 22:
* Kết quả:
- Hiển thị:
- Chạy thử:
+ Điền thiếu tên đăng nhập:
+ Nhập sai định dạng email:

* Mã nguồn:
<html>
<head>
<meta charset = "UTF-8">
<style>
*{
padding: 0;
margin:0;
box-sizing:border-box;
}
#screen{
Width: 100%;
height: 100%;
padding: 0;
background-color: white;
}
table{
border-radius: 10px;
width: 70%;
padding: 0px;
margin: 0px;
border: none;
position: absolute;
}
td{
padding-left: 15px;
padding-top: 15px;
padding-bottom: 0;
font-size: 20px;
vertical-align: bottom;
}
.left td{
width: 40%;
}
.right td{
width: 60%;
padding-left: 100px;
text-align: left;
}
.required-field {
color: red;
margin-left: 5px;
}
input {
height: 30px;
width: 300px;
display: flex;
}
select{
height: 30px;
}
.form-group {
height: 30px;
width: 300px;
display: flex;
}
button{
height: 30px;
width: 70px;
font-size: 12px;
background-color: azure;
}
.form-group label {
font-size: 4px;
flex-basis: 150px;
font-weight: bold;
}
.form-group input {
flex-grow: 1;
padding: 8px 10px;
border: 1px solid #020000;
border-radius: 4px;
}
.logo{
text-align: left;
width: 100%;
background: rgb(183, 236, 255);
}
img{
height: 100px;
width: 350px;
padding: 10px;
}
h5{
color: red;
}
.font {
background-color: rgb(228, 237, 237);
flex-grow: 1;
padding: 8px 10px;
text-align: center;
width: 100%;
}
h6{
margin-bottom: 5px;
margin-left: 0px;
}
</style>
</head>
<body>
<div id="screen">
<div class="logo">
<br>
<img src="Hình ảnh web/logo bài 22.png"></div>
<table>
<tr>
<td>
<table class="small">
<tr>
<td colspan="2" class="font"><h5>Thông tin đăng ký</h5></td>
</tr>
<tr>
<td colspan="2" style="padding: 8px 10px; background-color: rgb(246, 246,
246);"><h6>Bạn phải khai báo đầy đủ các mục có đánh dấu *</h6></td>
</tr>
<tr>
<td class="left" style="text-align: right;"><h6>Tên đầy đủ:</h6></td>
<td class="right">
<input type="text" id="name" name="name" placeholder="Họ và tên" required>
<span class="required-field"><h6>(*)</h6></span>
</div>
</td>
</tr>
<tr>
<td class="left" style="text-align: right;"><h6>Ngày sinh:</h6></td>
<td class="right">
<form>
<select id="day" name="day">
<option value="">Ngày</option>
<option value="1">1</option>
</select>


<select id="month" name="month">
<option value="">Tháng</option>
<option value="1">Tháng 1</option>
</select>

<select id="year" name="year">
<option value="">Năm</option>
</select>
</form>
</td>
</tr>
<tr>
<td class="left" style="text-align: right;"><h6>Giới tính:</h6></td>
<td class="right" >
<form>
<select id="sex" name="sex">
<option value="">Giới tính</option>
<option value="Man">Nam</option>
<option value="Female">Nữ</option>
<option value="Other">Khác</option>
</form>
</td>
</tr>
<tr>
<td style="text-align: right;"><h6>Nơi sống:</h6></td>
<td>
<form>
<select id="location" name="location">
<option value="">Chọn tỉnh</option>
<option value="HCM">TP.Hồ Chí Minh</option>
<option value="HN">TP.Hà Nội</option>
<option value="Other">Khác</option>
</form>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="2" class="font"><h5>Thông tin tài khoản</h5></td>
</tr>
<tr>
<td class="left" style="text-align: right;"><h6>Tên đăng nhập:</h6></td>
<input type="text" id="username" name="username"required>
</div>
</td>
</tr>
<tr>
<td class = "left" style="text-align: right;"><h6>Email:</h6></td>
<input type="email" id="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-
Z0-9.-]+\.[a-zA-Z]{2,}" required>
</div>
</td>
</tr>
<tr>
<td class = "left" style="text-align: right;" ><h6>Mật khẩu:</h6></td>
<input type="password" id="password" name="password" required>
</div>
</td>
</tr>
<tr>
<td class = "left" style="text-align: right;"><h6>Nhập mật khẩu:</h6></td>
<input type="password" id="confirm-password" name="confirm-password" required>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><button id="submit-btn"
onclick="validateForm()">Chấp nhận</button>
<button id="reset-btn" onclick="resetForm()">Xác lập lại</button></td>
<div id="error-message" style="color: red;"></div>
</tr>
</table>
</td>
</td>
</tr>
</table>
</div>
<script>
function checkPassword() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirm-password").value;
if (password !== confirmPassword) {
alert("Mật khẩu và xác nhận mật khẩu không khớp. Vui lòng kiểm tra lại.");
return false;
}
return true;
}
var email = document.getElementById("email").value;
var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
alert("Email không hợp lệ. Vui lòng nhập email đúng định dạng.");
return false;
}
return true;
}
if (
document.getElementById('username').value.trim() === '' ||
document.getElementById('password').value.trim() === '' ||
document.getElementById('confirm-password').value.trim() === ''||
) {
alert("Vui lòng điền vào những mục có dấu");
return false;
}
// Perform password, phone, and email validation
if (!checkPassword() || !validateEmail()) {
return false;
}
// If all validations pass, submit the form
alert('Đăng ký thành công !');
return true;
}
</script>
</body>
</html>

NGUYỄN THỊ THÚY ANH Bài Tập 15-22

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

NGUYỄN THỊ THÚY ANH Bài Tập 15-22

Uploaded by

Copyright:

Available Formats

BÀI TẬP VỀ NHÀ

Họ và tên: Nguyễn Thị Thúy Anh

+ Số điện thoại không hợp lệ:

+ Không điền các trường bắt buộc

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

+ Họ và tên không viết hoa

+ Đặt mật khẩu không đúng yêu cầu:

+ Nhập thiếu thông tin các trường bắt buộc:

// Reset the form

+ Nhập sai định dạng email:

You might also like