Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Two-way binding và sự kiện Change trong VueJS 2
Trong bài tập nâng cao này, mình sẽ kết hợp Two-way binding và xử lý sự kiện để thực hiện Form Validation trong VueJS 2. Bài toán đặt ra là làm thế nào mình có thể kiểm tra tính hợp lệ của dữ liệu khi người dùng nhập liệu vào form, và hiển thị thông báo lỗi nếu cần thiết.
Form Validation trong VueJS 2
Sử dụng các sự kiện như @blur, @input, @change để kiểm tra dữ liệu khi người dùng nhập liệu.
Thực hiện kiểm tra tính hợp lệ của dữ liệu và hiển thị thông báo lỗi nếu cần thiết.
File index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Form Validation</title>
<!-- Thêm đoạn CSS -->
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
#app {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
width: 200px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.error-message {
color: red;
margin-top: -10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<h1>Form Validation trong VueJS 2 (Nâng Cao)</h1>
<form @submit.prevent="submitForm">
<label for="name">Tên:</label>
<input type="text" id="name" v-model="formData.name" @input="validateName" @blur="validateName" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" v-model="formData.email" @input="validateEmail" @blur="validateEmail" required>
<br>
<button type="submit">Submit</button>
</form>
<p class="error-message">{{ errorMessage }}</p>
</div>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- Main JavaScript file -->
<script src="main.js"></script>
</body>
</html>
File main.js:
// Tạo một Vue instance
var app = new Vue({
el: '#app',
data: {
formData: {
name: '',
email: ''
},
errorMessage: ''
},
methods: {
submitForm: function() {
// Phương thức này sẽ được gọi khi form được submit
// Xử lý dữ liệu nếu cần
if (this.validateName() && this.validateEmail()) {
// Nếu dữ liệu hợp lệ, tiến hành xử lý form submission
console.log('Form submitted:', this.formData);
} else {
// Nếu có lỗi, hiển thị thông báo
this.errorMessage = 'Vui lòng kiểm tra lại thông tin nhập.';
}
},
validateName: function() {
// Kiểm tra tính hợp lệ của tên
if (!/^[a-zA-Z ]*$/.test(this.formData.name)) {
this.errorMessage = 'Tên chỉ được chứa chữ cái và khoảng trắng.';
return false;
} else {
this.errorMessage = '';
return true;
}
},
validateEmail: function() {
// Kiểm tra tính hợp lệ của email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(this.formData.email)) {
this.errorMessage = 'Email không hợp lệ.';
return false;
} else {
this.errorMessage = '';
return true;
}
}
}
});
Giải thích:
- Sử dụng
v-modelđể liên kết giá trị của input với các biến trongformDatatrong Vue instance. - Sử dụng sự kiện
@inputđể kiểm tra dữ liệu khi người dùng nhập liệu. - Sử dụng sự kiện
@blurđể kiểm tra dữ liệu khi người dùng rời khỏi trường input. - Sử dụng
@submit.preventđể ngăn chặn hành động mặc định của form và thay thế nó bằng phương thứcsubmitForm.
Vue Instance:
- Tạo một Vue instance và liên kết nó với phần tử có id là app trong HTML.
Data:
- formData: Một đối tượng chứa các thuộc tính name và email để lưu trữ giá trị của các trường input.
- errorMessage: Một biến để lưu trữ thông báo lỗi.
Methods:
submitForm: Phương thức được gọi khi form được submit.
- Kiểm tra tính hợp lệ của tên và email sử dụng các hàm
validateNamevàvalidateEmail. - Nếu dữ liệu hợp lệ, tiến hành xử lý form submission (ở đây chỉ log ra console).
- Nếu có lỗi, hiển thị thông báo lỗi.
validateName: Phương thức kiểm tra tính hợp lệ của tên.
- Sử dụng biểu thức chính quy để kiểm tra xem tên chỉ chứa chữ cái và khoảng trắng.
- Cập nhật
errorMessagevà trả về giá trị true nếu hợp lệ, ngược lại là false.
validateEmail: Phương thức kiểm tra tính hợp lệ của email.
- Sử dụng biểu thức chính quy để kiểm tra định dạng của email.
- Cập nhật
errorMessagevà trả về giá trị true nếu hợp lệ, ngược lại là false.
Bài tập về Form Validation trong VueJS 2 đã giúp chúng ta hiểu cách sử dụng Two-way binding và xử lý sự kiện để tạo ra một trải nghiệm nhập liệu tích cực và người dùng. VueJS một lần nữa chứng tỏ khả năng linh hoạt và hiệu quả của nó trong việc xây dựng các tính năng phức tạp trong ứng dụng web.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Two-way binding với v-model trong VueJS 2
- Two-way binding với Checkbox trong VueJS 2
- Two-way binding với Dropdown trong VueJS 2
- Two-way binding với Textarea trong VueJS 2
- Two-way binding với Radio Buttons trong VueJS 2
- Two-way binding với Number Input trong VueJS 2
- Two-way binding và xử lý sự kiện trong VueJS 2
- Two-way binding và Form Submission trong VueJS 2
- Two-way binding và sự kiện Change trong VueJS 2
