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

Trang chủ » đăng Nhập Trong Js » CODE JAVASCRIPT KIỂM TRA ĐĂNG NHẬP NGƯỜI DÙNG

Có thể bạn quan tâm

Page

  • Home
  • About Us
  • Privacy Policy

Social

  • Google Plus
  • Facebook
IT Love Design

Design Tutorial, IT Tutorial and much more!

Custom Links

  • Home
  • Documents
  • Software
  • Tutorial
  • Resources
  • Game

Documents

  • Programming
  • CSS
  • Javascript
  • Design
  • Photoshop
  • PHP
  • Git
  • IOS
  • S.E.O & Marketing

Resources

  • IT
  • Design
  • AE projects
  • Powerpoint Templates

Tutorial

  • CSS
  • Design
  • Git
  • IT
  • PHP
  • Wordpress

Game

  • Game Desktop
  • Game Mobile

Latest

  • Latest
CODE JAVASCRIPT KIỂM TRA ĐĂNG NHẬP NGƯỜI DÙNG 2 documents, javascript-co-ban 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

Like to share?

Related

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

Post a Comment Default Comments Facebook Comments

  1. UnknownSeptember 27, 2021 at 6:50 PM

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

    ReplyDeleteReplies
      Reply
  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

    ReplyDeleteReplies
      Reply
Add commentLoad more...

emo-but-icon

Tabs

Recent

Popular

  • TỔNG HỢP CODE KIỂM TRA GIÁ TRỊ NHẬP VÀO Ô TEXTBOX TRONG JAVASCRIPT
  • Javascript cơ bản - Hàm alert() - confirm() - prompt(), toán tử, hàm if... trong Javascript
  • Thay đổi Icon con trỏ chuột (Change style mouse icon)
  • Hướng Dẫn Gõ Nhanh Công Thức Toán Học (Equation) trong Microsoft Word (2007 trở lên) Mà Không Cần Click Chuột!
  • CODE JAVASCRIPT KIỂM TRA ĐĂNG NHẬP NGƯỜI DÙNG

Comments

Like Us!

It Love Design

Tag cloud

ae projects (12) Creative Market (3) css (9) css-document (1) design-doucument (4) Digital-Tutors (1) documents (14) game (6) game-desktop (5) game-mobile (1) git (1) git-document (1) google adsense (1) GraphicRiver (4) indesign (1) ios-document (2) javascript-co-ban (9) javascript-jquery (3) Latest (89) Lynda (5) photoshop (2) php (2) php-document (1) Powerpoint (12) programming-document (1) resources (25) resources-design (1) resources-it (1) seo-marketing-document (2) Stock (1) tester (1) Tips&Tricks (5) tut-design (73) tut-it (37) tut-wordpress (1) Tutorials (105)

Contact Us

Name Email * Message *

Random

Total Pageviews

Copyright 2016 IT Love Design Scroll item ae projects Creative Market css css-document design-doucument Digital-Tutors documents game game-desktop game-mobile git git-document google adsense GraphicRiver indesign ios-document javascript-co-ban javascript-jquery Latest Lynda photoshop php php-document Powerpoint programming-document resources resources-design resources-it seo-marketing-document Stock tester Tips&Tricks tut-design tut-it tut-wordpress Tutorials

Từ khóa » đăng Nhập Trong Js