비전공자 개발일기

PHONE NUMBER VAILDATION 본문

JQuery

PHONE NUMBER VAILDATION

HiroDaegu 2022. 5. 21. 00:07
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PHONE NUMBER VALIDATION</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
</head>
<body>
  <form>
    <div class="container">
      <h1 class="text-center">Phone Number Validation With Simple Javascript</h1>
      <div class="input-group">
        <input type="text" id="mobile" class="form-control" placeholder="Enter the phone number to check...">
        <div class="input-group-btn">
          <button class="btn btn-primary checkmobile">
            CHECK
          </button>
        </div>  
      </div>
    </div>
  </form>
</body>
</html>
body {
  border: 2px solid #007BFF;
  background-color: #EFEFEF;
}

.container {
  margin: 250px 0;
}

.container h1 {
  color: #007BFF;
}

.container .input-group input {
  border-color: #007BFF;
  border-width: 3px;
  border-radius: 25px 0 0 25px !important;
}

.container .input-group .input-group-btn button {
  border-radius: 0 25px 25px 0 !important;
}
$(document).ready(function() {
  $("body").on("click", '.checkmobile', function() {
    var tdr_regex = /((010)([0-9]{8})\b)/g;
  
    var mobile = $("#mobile").val();
    if(mobile !== "") {
      if(tdr_regex.test(mobile) == false) {
        alert(`Your PHONE NUMBER ${mobile} is not in the correct format!`);
      } else {
        alert(`YOUR PHONE NUMBER ${mobile} is valid!`)
      }
    } else {
      alert(`You have not entered your phone number!`);
    }
  })
})
728x90
LIST

'JQuery' 카테고리의 다른 글

Sly.js example Naver App Menu(수평 스크롤)  (0) 2022.05.27
SWIPE.js jQuery  (0) 2022.05.23
Read More & Read Less Button  (0) 2022.05.08
Dynamic Select Option  (0) 2022.05.04
Conditional Statements in jQuery  (0) 2022.01.08
'JQuery' Related Articles more