Có thể bạn quan tâm
Các tính năng chính của form:
- Kiểm tra đảm bảo dữ liệu nhập vào không được để trống
- Kiểm tra định dạng email
- Yêu cầu khi đặt mật khẩu (độ dài),…
Hướng dẫn sử dụng validation cho form trên website
Tải thư viện validation: https://github.com/hades-1997/F8-js-validate
Form ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="main">
<form action="" method="POST" class="form" id="form-1">
<h3 class="heading">Thành viên đăng ký</h3>
<p class="desc">Cùng nhau học lập trình miễn phí tại VNCODE ❤️</p>
<div class="spacer"></div>
<div class="form-group">
<label for="fullname" class="form-label">Tên đầy đủ</label>
<input id="fullname" name="fullname" type="text" placeholder="VD: Đắc Lợi" class="form-control">
<span class="form-message"></span>
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input id="email" name="email" type="text" placeholder="VD: email@domain.com" class="form-control">
<span class="form-message"></span>
</div>
<div class="form-group">
<label for="password" class="form-label">Mật khẩu</label>
<input id="password" name="password" type="password" placeholder="Nhập mật khẩu" class="form-control">
<span class="form-message"></span>
</div>
<div class="form-group">
<label for="password_confirmation" class="form-label">Nhập lại mật khẩu</label>
<input id="password_confirmation" name="password_confirmation" placeholder="Nhập lại mật khẩu" type="password" class="form-control">
<span class="form-message"></span>
</div>
<!-- <div class="form-group">
<label for="gender" class="form-label">Giới tính</label>
<input name="gender" type="radio" value="Nam" class="form-control">
<input name="gender" type="radio" value="Nữ" class="form-control">
<span class="form-message"></span>
</div> -->
<button class="form-submit">Đăng ký</button>
</form>
</div>
<script src="./validator.js"></script>
<script >
Validator({
form: '#form-1',
formGroupSelector: '.form-group',
errorSelector: '.form-message',
rules: [
Validator.isRequired('#fullname'),
Validator.isRequired('#email'),
Validator.isEmail('#email'),
Validator.minLength('#password',6),
Validator.isRequired('#password_confirmation'),
Validator.isConfirmed('#password_confirmation', function(){
return document.querySelector('#form-1 #password').value;
}, 'Mật khẩu nhập lại không trùng khớp')
],
// onsubmit: function(data){
// }
});
</script>
</body>
</html>
Xem Thêm : Chia sẻ giao diện tin tức miễn phí nukeviet 4.5.02
Thêm 1 chút css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
color: #333;
font-size: 62.5%;
font-family: "Open Sans", sans-serif;
}
.main {
background: #f1f1f1;
min-height: 100vh;
display: flex;
justify-content: center;
}
.form {
width: 360px;
min-height: 100px;
padding: 32px 24px;
text-align: center;
background: #fff;
border-radius: 2px;
margin: 24px;
align-self: center;
box-shadow: 0 2px 5px 0 rgba(51, 62, 73, 0.1);
}
.form .heading {
font-size: 2rem;
}
.form .desc {
text-align: center;
color: #636d77;
font-size: 1.6rem;
font-weight: lighter;
line-height: 2.4rem;
margin-top: 16px;
font-weight: 300;
}
.form-group {
display: flex;
margin-bottom: 16px;
flex-direction: column;
}
.form-label,
.form-message {
text-align: left;
}
.form-label {
font-weight: 700;
padding-bottom: 6px;
line-height: 1.8rem;
font-size: 1.4rem;
}
.form-control {
height: 40px;
padding: 8px 12px;
border: 1px solid #b3b3b3;
border-radius: 3px;
outline: none;
font-size: 1.4rem;
}
.form-control:hover {
border-color: #1dbfaf;
}
.form-group.invalid .form-control {
border-color: #f33a58;
}
.form-group.invalid .form-message {
color: #f33a58;
}
.form-message {
font-size: 1.2rem;
line-height: 1.6rem;
padding: 4px 0 0;
}
.form-submit {
outline: none;
background-color: #1dbfaf;
margin-top: 12px;
padding: 12px 16px;
font-weight: 600;
color: #fff;
border: none;
width: 100%;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
}
.form-submit:hover {
background-color: #1ac7b6;
}
.spacer {
margin-top: 36px;
}
copy file: validator.js
Ở giao diện form cần xuất validation chúng ta thêm đoạn script
Validator({
form: '#form-1',
formGroupSelector: '.form-group',
errorSelector: '.form-message',
rules: [
Validator.isRequired('#fullname'),
Validator.isRequired('#email'),
Validator.isEmail('#email'),
Validator.minLength('#password',6),
Validator.isRequired('#password_confirmation'),
Validator.isConfirmed('#password_confirmation', function(){
return document.querySelector('#form-1 #password').value;
}, 'Mật khẩu nhập lại không trùng khớp')
],
});
form: ” (Nhập id của form),
formGroupSelector: ‘.form-group’ (class bọc input),
errorSelector: ‘.form-message’ (class của khối báo lỗi),
rules: [] (Các ô input cần check điều kiện validate)
Không cho phép để trống chúng ta dùng: isRequired
Không đúng chuẩn email: isEmail
Độ dài kí tự bắt buộc: minLength
Check dữ liệu nhập lại có trùng khớp: isConfirmed
Ví dụ: chúng ta không cho phép người dùng để trống ô input full name
Validator({
form: '#form-1',
formGroupSelector: '.form-group',
errorSelector: '.form-message',
rules: [
Validator.isRequired('#fullname'),
});
Tương tự với ô email
Validator({
form: '#form-1',
formGroupSelector: '.form-group',
errorSelector: '.form-message',
rules: [
Validator.isRequired('#email'),
Validator.isEmail('#email')
],
});
Đối với ô password
+ Check mật khẩu không được để trống
+ Check độ dài kí tự
+ Check mật khẩu nhập lại
Validator({
form: '#form-1',
formGroupSelector: '.form-group',
errorSelector: '.form-message',
rules: [
Validator.minLength('#password',6),
Validator.isRequired('#password_confirmation'),
Validator.isConfirmed('#password_confirmation', function(){
return document.querySelector('#form-1 #password').value;
}, 'Mật khẩu nhập lại không trùng khớp')
],
});
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Website. Hãy nhấn nút like và share để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.
Nguồn: https://vncode.info
Danh mục: Thủ Thuật Chia Sẻ Hay
