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

2
,
A+ A-
Print Email
http://itlovedesign.blogspot.com/2017/05/code-javascript-kiem-tra-ang-nhap-nguoi.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>

  <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

javascript-co-ban 4826005277444784804
Newer Post Older Post Home item

Post a Comment Default Comments

  1. UnknownSeptember 27, 2021 at 6:50 PM

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

    ReplyDelete
  2. Thanh DuyOctober 6, 2021 at 12:24 PM

    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

item