Ứng dụng javascript kiểm tra dữ liệu trong form hướng dẫn cách kiểm tra các loại dữ liệu trong form như text , radio , checkbox, select, textarea…Thực hiện cụ thể em xem trong video ở cuối bài nhé.
Ứng dụng javascript kiểm tra dữ liệu trong form
- Code tạo form đăng ký
- Chuẩn bị chỗ hiện lỗi trong form
- Định dạng cho các input mà user nhập sai:
- Gọi hàm kiểm tra dữ liệu khi submit
- Định nghĩa hàm kiểm tra dữ liệu
- Kiểm tra dữ liệu text với field tên đăng nhập
- Kiểm tra dữ liệu text với field mật khẩu
- Kiểm tra dữ liệu text với field họ tên
- Kiểm tra dữ liệu text với với field email
- Cách kiểm tra trạng thái các radio với field phái
- Kiểm tra trạng thái các checkbox với field sở thích
- Cách kiểm tra giá trị selectbox với field nghề nghiệp
- Kiểm tra độ dài textarea với field giới thiệu
Code tạo form đăng ký
Chúng ta tạo 1 form để thực hiện kiểm tra bằng javascript nhé:
Tạo file dangky.html và code:
<form id="frm1" method="post" action="xulydangky.php">
<p>
<label>Tên đăng nhập</label>
<input type="text" class="txt" id="tendangnhap" name="tendangnhap" placeholder="Tên đăng nhập 6 đến 10 ký tự" autocomplete="off" autofocus>
</p>
<p>
<label>Mật khẩu</label>
<input type="password" class="txt" id="matkhau" name="matkhau" placeholder="Mật khẩu 6 đến 20 ký tự" autocomplete="new-password">
</p>
<p>
<label>Họ tên</label>
<input type="text" class="txt" id="hoten" name="hoten" placeholder="Nhập họ tên của bạn">
</p>
<p>
<label>Email</label>
<input type="email" class="txt" id="email" name="email" placeholder="Nhập email của bạn">
</p>
<p>
<label>Phái</label>
<span id="chonphai">
<input type="radio" name="phai" value="Nam"><label>Nam</label>
<input type="radio" name="phai" value="Nữ"><label>Nữ</label> <br>
</span>
</p>
<p>
<label>Sở thích</label>
<span id="chonsothich">
<input type="checkbox" class="sothich" name="st[]">Nhìn mưa rơi
<input type="checkbox" class="sothich" name="st[]">Nghe chim hót
<input type="checkbox" class="sothich" name="st[]">Ngắm mây bay
</span>
</p>
<p>
<label>Nghề nghiệp</label>
<select name="nghenghiep" id="nghenghiep" class="txt">
<option value="0">Chọn nghề </option>
<option value="1">Sinh viên</option>
<option value="2">Giáo viên </option>
<option value="3">Lập trình viên </option>
</select>
</p>
<p>
<label>Giới thiệu </label>
<textarea class="txt" id="gioithieu" name="gioithieu" rows="6" placeholder="Giới thiệu bản thân"></textarea>
</p>
</p>
<p>
<label></label>
<button type="submit" name="btndangky" value="nut">Đăng ký</button>
</p>
</form>Định dạng css cho form
#frm1 {
width: 600px; margin: auto;
border: 2px solid darkslategrey; padding: 10px;
}
#frm1 > p {
display: grid;
grid-template-columns: 120px auto;
}
#frm1 label { color: darkslategray;}
#frm1 .txt {
width: 100%; padding: 8px; border: 1px solid lightcoral;
vertical-align:middle;}
#frm1 button { width: 120px; height: 40px; }
#frm1 textarea.txt {vertical-align: top; }
Chuẩn bị chỗ hiện lỗi trong form
Lỗi ở đây là lỗi dữ liệu, tức user nhập dữ liệu trong form khộng đúng như yêu cầu thì chúng ta hiện lỗi để user nhập lại.
– Code html: Trước tag p chứa button, thêm code
<p> <label></label> <span id="baoloi"></span> </p>
– Định dạng css cho vị trí hiện lỗi:
#frm1 #baoloi {
background: darksalmon; color:ghostwhite;
text-align: center;
}Định dạng cho các input mà user nhập sai:
Chúng ta tạo 1 class css để khi user nhập sai chỗ nào trong form thì cho chỗ đó sáng lên. Đơn giản thôi, bạn vào css tạo class như sau:
#frm1 .loi { padding: 6px; border:1px solid red; background:yellow; }Gọi hàm kiểm tra dữ liệu khi submit
Hàm kiểm tra giá trị trong form được gọi trong sự kiện submit của form. Hàm này bạn viết gì thì tùy ý nhưng nhớ trả về giá trị true hoặc falase nhé. Trong sự kiện submit của form , bạn ghi như sau:
<form id="frm1" method="post" onsubmit="return kiemtra()" >
Định nghĩa hàm kiểm tra dữ liệu
Trong hàm kiểm tra các loại dữ liệu trong form , bạn tạo 1 biến loi và gán giá trị rỗng. Quá trình kiểm tra sau đó nếu thấy có lỗi dữ liệu thì sẽ gán giá trị cho biến loi.
function kiemtra() {
var loi = "";
// kiểm tra tên đăng nhập : text + length
// kiểm tra mật khẩu : text + length
// kiểm tra họ tên : text
//kiểm tra email
//kiểm tra phái : radio
//kiểm tra sở thích : checkbox
// kiểm tra nghề nghiệp : select
// kiểm tra giới thiệu : textarea
// trả về giá trị kiểm tra
if(loi!=""){
document.getElementById('baoloi').innerHTML="<p>" + loi + "</p>";
return false;
}
}Kiểm tra dữ liệu text với field tên đăng nhập
var tdn = document.getElementById("tendangnhap");
if(tdn.value==""){
tdn.className="loi";
loi += "Tên đăng nhập không được bỏ trống<br>";
}
else if(tdn.value.length<=6){
tdn.className="loi";
loi += "Tên đăng nhập quá ngắn<br>";
}
else if(tdn.value.length>10){
tdn.className="loi";
loi += "Tên đăng nhập quá dài<br>";
}
else tdn.className="txt";Kiểm tra dữ liệu text với field mật khẩu
var mk = document.getElementById("matkhau");
if(mk.value==""){
mk.className="loi";
loi += "Mật khẩu không được bỏ trống<br>";
}
else if(mk.value.length<=6){
mk.className="loi";
loi += "Mật khẩu quá ngắn<br>";
}
else if(mk.value.length>20){
mk.className="loi";
loi += "Mật khẩu quá dài<br>";
}
else mk.className="txt";Kiểm tra dữ liệu text với field họ tên
var hoten= document.getElementById("hoten");
if(hoten.value==""){
hoten.className="loi";
loi += "Họ và tên không được bỏ trống.<br>";
}
else hoten.className="txt";Kiểm tra dữ liệu text với với field email
var email= document.getElementById("email");
if(email.value==""){
email.className="loi";
loi += "Email không được bỏ trống.<br>";
}Cách kiểm tra trạng thái các radio với field phái
dem=0;
var arr_phai= document.getElementsByName("phai");
for(var i=0; i<arr_phai.length; i++){
if(arr_phai[i].checked) dem++;
}
if(dem==0){
document.getElementById("chonphai").className="loi";
loi += "Phải chọn giới tính.<br>";
}
else document.getElementById("chonphai").className="";Kiểm tra trạng thái các checkbox với field sở thích
arr_sothich= document.getElementsByClassName("sothich");
dem=0;
for(var i=0;i<arr_sothich.length;i++){
if(arr_sothich[i].checked) dem++;
}
if(dem==0){
document.getElementById("chonsothich").className="loi";
loi += "Phải chọn ít nhất 1 sở thích.<br>";
}
else document.getElementById("chonsothich").className="";Cách kiểm tra giá trị selectbox với field nghề nghiệp
var nghe = document.getElementById("nghenghiep");
if (nghe.value==0){
nghe.className="loi";
loi += "Phải chọn một nghề.<br>";
}
else nghe.className="txt";Kiểm tra độ dài textarea với field giới thiệu
var gt= document.getElementById('gioithieu');
if(gt.value.length>200){
gt.className="loi";
loi += "Giới thiệu phải dưới 200 kí tự.<br>";
}
else gt.className="txt";Bài Ứng dụng javascript kiểm tra dữ liệu trong form hướng dẫn bạn code để xem dữ liệu user nhập trong form có đúng như mong muốn khai không. Cái này quan trọng lắm nhe. Các em thử thực hành nhé.
Cần xem thêm nữa thì nhắp vào đây: Kiểm tra dữ liệu trong form
