Danh Mục Bài Viết
Ok Anh em, Trong lập trình việc sử dụng Form là rất thường xuyên. Bài này mình sẽ hướng dẫn anh em cách để tạo một form đơn giản và thực hiện validate bằng Javascrip cho Form luôn nhé! Let’s go thôi.
Đâu tiên mình sẽ khởi tạo 1 file index.html và tạo một form đơn giản bằng Html. Form mình tạo sẽ có các trường thông tin là Tên, Số điện thoại và Email
<form action="">
<p style="color: red;" id="alert"></p>
<input type="text" id="name" placeholder="Tên của bạn">
<input type="text" id="mobile" placeholder="Số điện thoại" id="">
<input type="text" id="email" placeholder="Email">
<button class="register-btn">Đăng ký</button>
</form>Sau đó để nhanh chóng mình sẽ Css ngay trong đó luôn
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #000428; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #004e92, #000428); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Roboto', sans-serif;;
}
form {
width: 350px;
display: flex;
flex-direction: column;
background-color: whitesmoke;
padding: 50px 20px;
border-radius: 10px;
}
input {
height: 40px;
outline: none;
margin-bottom: 20px;
border: none;
background-color: #004e92;
border-radius: 5px;
padding-left: 12px;
color: aliceblue;
}
input::placeholder {
color: aliceblue;
}
button {
height: 40px;
cursor: pointer;
background: #42275a; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #734b6d, #42275a); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border: none;
color: aliceblue;
}
</style>Ta được giao diện:
Đối với Javascript mình sẽ cần 2 biểu thức chính quy.
Đầu tiên là đối với Số điện thoại:
var mobile_regex = /((09|03|07|08|05)+([0-9]{8})\b)/g;Tiếp theo là địa chỉ Email:
var email_regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;Và ta có code Javascript hoàn chỉnh:
<script>
$(document).ready(function() {
$('.register-btn').on('click', function(e) {
var mobile_regex = /((09|03|07|08|05)+([0-9]{8})\b)/g;
var email_regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var name = $('#name').val();
var mobile = $('#mobile').val();
var email = $('#email').val();
var alert = $('#alert');
var validateform = validate(name,mobile,email)
if(validateform){
alert.html('Ok rồi nhé!')
e.preventDefault()
return true
}
function validate (name,mobile,email){
if(name =='')
{
alert.html('Bạn chưa điền tên!')
$('#name').focus() ;
e.preventDefault()
return false
}
if(mobile =='')
{
alert.html('Bạn chưa điền số điện thoại!')
$('#mobile').focus() ;
e.preventDefault()
return false
}
if (mobile_regex.test(mobile) == false)
{
alert.html('Số điện thoại của bạn không đúng!')
e.preventDefault()
return false
}
if(email ==''){
alert.html('Bạn chưa điền Email!')
$('#email').focus() ;
e.preventDefault()
return false
}
if (email_regex.test(email) == false)
{
alert.html('Email của bạn không đúng!')
e.preventDefault()
return false
}
return true
}
});
});
</script>À, các bạn đừng quên link CDN Jquery vào thẻ head nhé!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
File index.html hoàn chỉnh của mình bây giờ sẽ là:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Form-Validation</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #000428; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #004e92, #000428); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Roboto', sans-serif;;
}
form {
width: 350px;
display: flex;
flex-direction: column;
background-color: whitesmoke;
padding: 50px 20px;
border-radius: 10px;
}
input {
height: 40px;
outline: none;
margin-bottom: 20px;
border: none;
background-color: #004e92;
border-radius: 5px;
padding-left: 12px;
color: aliceblue;
}
input::placeholder {
color: aliceblue;
}
button {
height: 40px;
cursor: pointer;
background: #42275a; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #734b6d, #42275a); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #734b6d, #42275a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border: none;
color: aliceblue;
}
</style>
<body>
<form action="">
<p style="color: red;" id="alert"></p>
<input type="text" id="name" placeholder="Tên của bạn">
<input type="text" id="mobile" placeholder="Số điện thoại" id="">
<input type="text" id="email" placeholder="Email">
<button class="register-btn">Đăng ký</button>
</form>
<script>
$(document).ready(function() {
$('.register-btn').on('click', function(e) {
var mobile_regex = /((09|03|07|08|05)+([0-9]{8})\b)/g;
var email_regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var name = $('#name').val();
var mobile = $('#mobile').val();
var email = $('#email').val();
var alert = $('#alert');
var validateform = validate(name,mobile,email)
if(validateform){
alert.html('Ok rồi nhé!')
e.preventDefault()
return true
}
function validate (name,mobile,email){
if(name =='')
{
alert.html('Bạn chưa điền tên!')
$('#name').focus() ;
e.preventDefault()
return false
}
if(mobile =='')
{
alert.html('Bạn chưa điền số điện thoại!')
$('#mobile').focus() ;
e.preventDefault()
return false
}
if (mobile_regex.test(mobile) == false)
{
alert.html('Số điện thoại của bạn không đúng!')
e.preventDefault()
return false
}
if(email ==''){
alert.html('Bạn chưa điền Email!')
$('#email').focus() ;
e.preventDefault()
return false
}
if (email_regex.test(email) == false)
{
alert.html('Email của bạn không đúng!')
e.preventDefault()
return false
}
return true
}
});
});
</script>
</body>
</html>Bây giờ chúng ta ra màn hình để kiểm tra nhé!
Quá ngon lành cành đào đúng không? Anh em áp dụng vào thực tế luôn nhé!
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
