TỔNG HỢP CODE KIỂM TRA GIÁ TRỊ NHẬP VÀO Ô TEXTBOX TRONG JAVASCRIPT
https://itlovedesign.blogspot.com/2017/05/tong-hop-code-kiem-tra-gia-tri-nhap-vao.html
File html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VALIDATE FORM</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p align="center">Có 2 cách xư lý ko cho trình duyệt auto redirect: 1 là dùng event ; 2 là return false(bên html cũng phải có return Tên hàm())</p>
<h1 align='center' style="color:red">KIỂM TRA NHẬP CÓ NHẬP VÀO KHUNG NHẬP LIỆU HAY KHÔNG</h1>
<div id="frame">
<form align='center' id='form' action="" onsubmit="Kiemtrathongtin(event)">
<input id='input' type="text"></br>
<label id='mess' style="color:white;"></label></br>
<button type='submit' name='submit'>Kiểm tra</button>
</form>
</div>
<h1 align='center' style="color:red">KIỂM TRA CHỈ CHO NHẬP SỐ</h1>
<div id="frame1">
<form align='center' id='form1' action=''>
<input id='input1' type="text"></br>
<label id='mess1' style="color:white;"></label></br>
<input type='submit' name='submit1' value='Kiểm tra' onclick="return Kiemtranhapso(input1)">
</form>
</div>
<h1 align='center' style="color:red">KIỂM TRA CHỈ CHO KÍ TỰ</h1>
<div id="frame2">
<form align='center' id='form2' action=''>
<input id='input2' type="text"></br>
<label id='mess2' style="color:white;"></label></br>
<input type='submit' name='submit1' value='Kiểm tra' onclick="Kiemtranhapkitu(event,input2)">
</form>
</div>
<h1 align='center' style="color:red">KIỂM TRA CHỈ CHO NHẬP ĐỊNH DẠNG EMAIL</h1>
<div id="frame3">
<form align='center' id='form3' action=''>
<input id='input3' type="text"></br>
<label id='mess3' style="color:white;"></label></br>
<input type='submit' name='submit1' value='Kiểm tra' onclick="Kiemtraemail(event,input3)">
</form>
</div>
<h1 align='center' style="color:red">KIỂM TRA ĐỘ DÀI KÍ TỰ NHẬP</h1>
<div id="frame4">
<form align='center' id='form4' action=''>
<input id='input4' type="text"></br>
<label id='mess4' style="color:white;"></label></br>
<input type='submit' name='submit1' value='Kiểm tra' onclick="Kiemtradodaikitu(event,input4,3,7)">
</form>
</div>
<script type="text/javascript" src='script.js'></script>
</body>
</html>
File css
#frame{
margin: 0 auto;
background-color: orange;
width: 500px;
height: 200px;
}
#frame1{
margin: 0 auto;
background-color: orange;
width: 500px;
height: 200px;
}
#form{
padding-top:50px;
margin-top: 50px;
}
#form1{
padding-top:50px;
margin-top: 50px;
}
#frame2{
margin: 0 auto;
background-color: orange;
width: 500px;
height: 200px;
}
#form2{
padding-top:50px;
margin-top: 50px;
}
#frame3{
margin: 0 auto;
background-color: orange;
width: 500px;
height: 200px;
}
#form3{
padding-top:50px;
margin-top: 50px;
}
#frame4{
margin: 0 auto;
background-color: orange;
width: 500px;
height: 200px;
}
#form4{
padding-top:50px;
margin-top: 50px;
}
File js
function Kiemtrathongtin(event)
{
///Cách 1: sài event
event.preventDefault();
//var temp=document.getElementById('input').value;
var temp=document.forms['form']['input'].value;
var mess=document.getElementById('mess');
if (temp=='')
{
mess.innerHTML='Bạn nhập thiếu rồi';
}
else
{
mess.innerHTML='Bạn nhập thành công rồi';
}
//Nếu truyền tham số dô thì bên html phải có truyền dô cái id của tag input
}
//function Kiemtranhapso(event,so)
function Kiemtranhapso(so)
{
//event.preventDefault();
//Cách 2 sài return false
var letter=/^[0-9]+$/;
var mess1=document.getElementById('mess1');
if (!so.value.match(letter))//Bên html đã truy vấn tới thẻ input r bên đây chỉ .value nữa là đủ
{
so.style.backgroundColor='red';
mess1.innerHTML='Bạn chỉ được nhập số thui';
return false;
}
else
{
mess1.innerHTML='Bạn nhập thành công rồi';
return false;
}
}
function Kiemtranhapkitu(event,kt)
{
event.preventDefault();
var letter1=/^[A-Z]+$/;
var letter2=/^[a-z]+$/;
var mess2=document.getElementById('mess2');
if (kt.value.match(letter1) || kt.value.match(letter2))
{
mess2.innerHTML='Bạn nhập thành công rồi';
}
else
{
mess2.innerHTML='Bạn chỉ được nhập kí tự thui';
kt.style.backgroundColor='red';
kt.focus();
}
}
function Kiemtraemail(event,email)
{
event.preventDefault();
var letter3= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var mess2=document.getElementById('mess3');
if (email.value.match(letter3))
{
mess3.innerHTML='Bạn nhập thành công rồi';
}
else
{
mess3.innerHTML='Bạn nhập định dạng email sai rồi (abc@gmail.com)';
email.style.backgroundColor='red';
email.focus();
}
}
function Kiemtradodaikitu(event,ktnhap,minkt,maxkt)
{
event.preventDefault();
var mess4=document.getElementById('mess4');
if (ktnhap.value.length<minkt || ktnhap.value.length>maxkt)
{
mess4.innerHTML='Bạn đã nhập quá số kí tự cho phép. Kí tự chp phép lớn hơn 3 và nhỏ hơn 7';
ktnhap.style.backgroundColor='red';
ktnhap.focus();
}
else
{
mess4.innerHTML='Bạn nhập thành công rồi';
}
}
Chạy demo trên trình duyệt
