CODE JAVASCRIPT KIỂM TRA ĐĂNG NHẬP NGƯỜI DÙNG

FILE HTML


<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>VALIDATE FORM</title>

 <link rel="stylesheet" href="style.css">

</head>

<body>

  <div id="frame">

  <form id='form' action="">

   <h1 align='center' style="color:white">ĐĂNG KÝ NGƯỜI DÙNG</h1>

   <div align='center' id='errorText'></div>

     <table align='center' cellspacing="0px" cellpadding="20px" border="0">
     <tr>
      <td  class='labeltext'>Tên đăng nhập:</td>
      <td>

       <input id='tendn' type="text" value='' name="dn" placeholder="Nhập tên đăng nhập" onblur="this.placeholder='Nhập tên đăng hhập'" onfocus="this.placeholder='Nhập tên đăng nhập'">

      </td>

     </tr>

     <tr>

      <td  class='labeltext'>Mật khẩu:</td>

      <td>

       <input id='mk' type="password" value='' name="mk" placeholder="Nhập mật khẩu" onblur="this.placeholder='Nhập mật khẩu'" onfocus="this.placeholder='Nhập mật khẩu'">

      </td>

     </tr>

     <tr>

      <td class='labeltext'>Email:</td>

      <td>

       <input id='email' type="email" value='' name="email" placeholder="Nhập tên đăng nhập" onblur="this.placeholder='Nhập tên đăng hhập'" onfocus="this.placeholder='Nhập tên đăng nhập'">

      </td>

     </tr>

     <tr>

      <td class='labeltext'>Nghề nghiệp</td>

      <td>

       <select id='nghenghiep'>

        <option  id='id1' value="1">Chọn nghề</option>

        <option  value="2">IT</option>

        <option  value="3">Design</option>

        <option  value="4">Teacher</option>

       </select>

      </td>

     </tr>

     <tr>

      <td class='labeltext'>Tuổi:</td>

      <td>

       <input id='tuoi' type="text" value='' name="tuoi" placeholder="Nhập tuổi" onblur="this.placeholder='Nhập tuổi'" onfocus="this.placeholder='Nhập tuổi'">

      </td>

     </tr>

     <tr>

      <td colspan="2">

       <input id='btnDangnhap' type="submit" value='Đăng nhập' name="">

      </td>

      

     </tr>

    </table>

  </form>

  </div>

<script type="text/javascript" src='script.js'></script>
</body>

</html>

FILE CSS


#frame{
  background-color: red;
  width: 500px;
  height:500px;
  margin:0 auto;
 }
 #errorText{
  font-size: 15px;
  font-weight: bold;
  color: white;
 }
 .labeltext{
  color: white;
 }
 #btnDangnhap{
  margin-left: 100px;

 }

FILE JS



//Sử dụng += để nối chuỗi xuất ra trong lệnh innerHTML
function Checkdangnhap(event, minKt, maxKt)

{

    event.preventDefault();

    var mess = document.getElementById('errorText');

    var username = document.getElementById('tendn').value;



    if (username == '')

    {

        document.getElementById('tendn').style.backgroundColor = 'yellow';

        mess.innerHTML += 'Tên đăng nhập ko được để trống ';

    } else if ((username.length > 0 && username.length < minKt) || username.length > maxKt)

    {

        document.getElementById('tendn').style.backgroundColor = 'yellow';

        mess.innerHTML += 'Tên đăng nhập từ 3-10 kí tự ';

    } else mess.innerHTML = 'Tên đăng nhập của bạn là :' + username + '';

}




//Viết bằng jquery

function Checkdangnhap(event, minKt, maxKt) {

    event.preventDefault();

    var mess = $("#errorText");

    var username = $("#tendn").val();

    if (username == '')

    {

        $('tendn').css('background-color', 'yellow');

        mess.html(mess.html() + 'Tên đăng nhập ko được để trống ');

    } else if ((username.length > 0 && username.length < minKt) || username.length > maxKt)

    {

        $('#tendn').css('background-color', 'yellow');

        mess.html(mess.html() + 'Tên đăng nhập từ 3-10 kí tự ');

    } else mess.html(mess.html() + 'Tên đăng nhập của bạn là :' + username + '');

}




function Checkpass(event)

{

    event.preventDefault();

    var pass = document.getElementById('mk').value;

    var mess = document.getElementById('errorText');

    if (pass == '')

    {

        document.getElementById('mk').style.backgroundColor = 'yellow';

        mess.innerHTML += 'Mật khẩu ko được để trống ';

    } else mess.innerHTML += 'Mật khẩu của bạn là ' + Array(pass.length + 1).join("*") + '';

}

function Checkemail(event)

{

    event.preventDefault();

    var mess = document.getElementById('errorText');

    var letter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    var email = document.getElementById('email').value;

    if (email == '')

    {

        document.getElementById('email').style.backgroundColor = 'yellow';

        mess.innerHTML += 'Email ko được để trống ';

    } else if (!email.match(letter))

    {

        document.getElementById('email').style.backgroundColor = 'yellow';

        mess.innerHTML += 'Email nhập sai định dạng';

    } else mess.innerHTML += 'Email của bạn là :' + email + '';



}

function Checknghenghiep(event)

{

    event.preventDefault();

    var mess = document.getElementById('errorText');

    var nghe = document.getElementById('nghenghiep');

    //if(nghe.options[0].selected)

    if (nghe.options['id1'].selected)

    {

        mess.innerHTML += 'Nghề nghiệp chưa được lựa chọn';

    } else mess.innerHTML += 'Nghề nghiệp của bạn là: ' + nghe.options[nghe.selectedIndex].innerText + '';

}

function Checktuoi(event)

{

    event.preventDefault();

    var mess = document.getElementById('errorText');

    var tuoi = document.getElementById('tuoi').value;

    parseInt(tuoi);

    if (tuoi == '')

    {

        document.getElementById('tuoi').style.backgroundColor = 'yellow';

        mess.innerHTML += 'Tuổi không được để trống';

    } else if (tuoi < 18 || tuoi > 50)

    {

        document.getElementById('tuoi').style.backgroundColor = 'yellow';

        mess.innerHTML += 'Tuổi từ 18-50, vui lòng nhập lại ';

    } else if (isNaN(tuoi))

    {

        document.getElementById('tuoi').style.backgroundColor = 'yellow';

        mess.innerHTML += 'Chỉ cho phép nhập số ';

    } else mess.innerHTML += 'Tuổi của bạn là :' + tuoi;

}

var btndangnhap = document.getElementById('btnDangnhap');

btndangnhap.onclick = function Validate() {

    //Mặc định các lỗi này sẽ ẩn

    var mess = document.getElementById('errorText');

    mess.innerHTML = '';

    //Gọi các hàm đã viết

    Checkdangnhap(event, 3, 10);

    Checkpass(event);

    Checkemail(event);

    Checknghenghiep(event);

    Checktuoi(event);



}



Viết bằng Jquery

function Checkdangnhap(event, minKt, maxKt) {

    event.preventDefault();

    var mess = $("#errorText");

    var username = $("#tendn").val();

    if (username == '')

    {

        $('#tendn').css('background-color', 'yellow');

        mess.html(mess.html() + 'Tên đăng nhập ko được để trống ');

    } else if ((username.length > 0 && username.length < minKt) || username.length > maxKt)

    {

        $('#tendn').css('background-color', 'yellow');

        mess.html(mess.html() + 'Tên đăng nhập từ 3-10 kí tự ');

    } else mess.html(mess.html() + 'Tên đăng nhập của bạn là :' + username + '');

}

function Checkpass(event)

{

    event.preventDefault();

    var pass = $('#mk').val();

    var mess = $('#errorText');

    if (pass == '')

    {

        $('#mk').css('background-color', 'yellow');

        mess.html(mess.html() + 'Mật khẩu ko được để trống ');

    } else mess.html(mess.html() + 'Mật khẩu của bạn là ' + Array(pass.length + 1).join("*") + '');

}

function Checkemail(event)

{

    event.preventDefault();

    var mess = $('#errorText');

    var letter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    var email = $('#email').val();

    if (email == '')

    {

        $('#email').css("background-color", "yellow");

        mess.html(mess.html() + 'Email ko được để trống ');

    } else if (!email.match(letter))

    {

        $('#email').css("background-color", "yellow");

        mess.html(mess.html() + 'Email nhập sai định dạng');

    } else mess.html(mess.html() + 'Email của bạn là :' + email + '');



}

function Checknghenghiep(event)

{

    event.preventDefault();

    var mess = $('#errorText');

    var nghe = $("#nghenghiep").val();

    if (nghe == '0') {

        mess.html(mess.html() + 'Nghề nghiệp chưa được lựa chọn' + '');

    } else

    {

        mess.html(mess.html() + 'Nghề nghiệp của bạn là: ' + $('option[value=' + nghe + ']').html() + '');

    }

}

function Checktuoi(event)

{

    event.preventDefault();

    var mess = $('#errorText');

    var tuoi = $('#tuoi').val();

    parseInt(tuoi);

    if (tuoi == '')

    {

        $('#tuoi').css("background-color", "yellow");

        mess.html(mess.html() + 'Tuổi không được để trống');

    } else if (tuoi < 18 || tuoi > 50)

    {

        $('#tuoi').css("background-color", "yellow");

        mess.html(mess.html() + 'Tuổi từ 18-50, vui lòng nhập lại' + '');

    } else if (isNaN(tuoi))

    {

        $('#tuoi').css("background-color", "yellow");

        mess.html(mess.html() + 'Chỉ cho phép nhập số' + '');

    } else mess.html(mess.html() + 'Tuổi của bạn là :' + tuoi);

}



btndangnhap.click(function Validate() {

    //Mặc định các lỗi này sẽ ẩn

    var mess = $('errorText');

    mess.html('');

    //Gọi các hàm đã viết

    Checkdangnhap(event, 3, 10);

    Checkpass(event);

    Checkemail(event);

    Checknghenghiep(event);

    Checktuoi(event);



});

var btnXoa = $("#btnXoa");

btnXoa.click(function XoaForm() {

    $("input[type=text], input[type=password], input[type=email").val("");

    $("select").prop('selectedIndex', 0);;

});

Chạy demo chương trình



Related

CHƯƠNG TRÌNH TÍNH ĐIỂM TRUNG BÌNH, XẾP LOẠI HỌC SINH BẰNG JAVASCRIPT

File html <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>TÍNH ĐIỂM TB H...

DOM trong Javascript

DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML. Danh sách chia nhóm DOM: DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài ...

Javascript cơ bản - Giới thiệu và thao tác cơ bản

GIỚI THIỆU JAVASCRIPT Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website. Javascr...

Post a Comment Default Comments

  1. Biến event là sao ạ, mong ad trả lời em ạ

    ReplyDelete
  2. Cách nào làm sao vậy admin. Mình làm thông báo này khi đăng nhập vô blog đúng ko

    ReplyDelete

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

RecentPopularComments

Recent

Cài đặt Wordpress trên localhost với XAMPP (Install wordpress on localhost with XAMPP)

Bước 1:Bạn cài đặt XAMPP và download Wordpress tại địachỉ https://wordpress.org/download/ về máy tính của mình Bước 2: Giải nén thư mục Wordpress vừa download và chép vào thư mục htdocs của...

Fix lỗi mở file Power Point (How to Solve “PowerPoint Found a Problem with Content” Error)

Khi bạn mở file Power Point lên mà bị thống báo lỗi này Click Repair thử  Vẫn không được !!!! Để giải quyết trường hợp này mình sẽ có 2 cách để khắc phục Cách 1: Bạn làm như sau Tắ...

Resources for IT (Collect somewhere on Internet)

Resources include link download tools, software, code for IT default-facebook

Xoá các file đã mở gần đây trong Photoshop CC (Delete Recent file list on Photoshop CC)

Nếu như bạn đã làm việc hay thao tác với một số file trên Photoshop. Khi tắt Photoshop, mở lại dùng nó vào lần sau, thì khi mở lên Photoshop sẽ hiện danh sách các file bạn đã thao tác , làm việc cùng ...

Responsive fontsize text trong html5 một cách dễ dàng (How to responsive fontsize text in html5)

Trước tiên, ta phải tìm hiểu sơ qua một số đơn vị trong html5. Ngoài đơn vị pixel ra thì có một số đơn vị hay sử dụng: Đơn vị : em  Ví dụ có element div1 chứa div2, div1 có font-size:14px ...

Resources for designer (Collect somewhere on Internet)

Resources include link download stock, plugin, tool... for designer. default-facebook

Set up chiều rộng của các cột trong table bằng nhau chỉ bằng một thuộc tính trong css (Set column of table same width by css)

Bài viết này mình xin demo 1 trick để set up chiều rộng của thẻ td trong table html5 chỉ bằng một thuộc tính. Ở đây ví dụ mình có cái bảng viết bằng code html5 giao diện như sau Có tổng cộng 3 cộ...

Comments

Diễn Đàn Gaming:

SELLVIA24H.TOP - Latest news from the United States

Intern TOS:

github là gì Có thể nhiều người không biết github là gì ấy chứ, GitHub là một nơi để lưu trữ và quản lý mã nguồn cho các dự án phần mềm. GitHub có cả phiên bản miễn phí và trả phí, với phiên bản miễn ...

Intern TOS:

This comment has been removed by the author.

Like Us!

item