Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    input[type="text"] { width: 200px; }
  </style>
</head>
<body>
<form action="">
  <div>
    郵遞區號<br>
    <input type="text" id="zipcode" name="zipcode" placeholder="###-##" onblur="validateZipcode(this.form, document.getElementById('zipcode-helper'));">
    <p id="zipcode-helper"></p>
  </div>
  <div>
    生日<br>
    <input type="text" id="birthday" name="birthday" placeholder="mm/dd/yyyy"onblur="validateBirthday(this.form, document.getElementById('birthday-helper'));">
    <p id="birthday-helper"></p>
  </div>
  <div>
    電話<br>
    <input type="text" id="tel" name="tel" placeholder="##-########"onblur="validateTel(this.form, document.getElementById('tel-helper'));">
    <p id="tel-helper"></p>
  </div>
  <div>
    mail<br>
    <input type="text" id="email" name="email" placeholder="example@example.com" onblur="validateEmail(this.form, document.getElementById('mail-helper'));">
    <p id="mail-helper"></p>
  </div>
  <div>
    <input type="submit" id="submit" value="送出" onclick="finalValidate(this.form, document.getElementById('ok-helper'));">
    <p id="ok-helper"></p>
  </div>
</form>
</body>
</html>
 
var zipReGex = /^\d{3}-\d{2}$/;
var birthdayReGex = /^\d{2}\/\d{2}\/19\d{2}$/;
var telReGex = /^0\d-\d{7,8}$/;
var mailReGex = /^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/;
​
function validateZipcode (inputStr, helpStr) {
  if (!zipReGex.test(zipcode.value)) {
    helpStr.innerHTML = "the zipcode is invalid.";
    return false;
  } else {
    helpStr.innerHTML = "the right value";
    return true;
  }
}
​
function validateBirthday (inputStr, helpStr) {
  if (!birthdayReGex.test(birthday.value)) {
    helpStr.innerHTML = "Please enter birthday";
    return false;
  } else {
    helpStr.innerHTML = "the right value";
    return true;
  }
}
​
function validateTel (inputStr, helpStr) {  
  if (!telReGex.test(tel.value)) {
    helpStr.innerHTML = "Please enter phone number";
    return false;
  } else {
    helpStr.innerHTML = "the right value";
    return true;
  }
}
​
function validateEmail (inputStr, helpStr) { 
  if (!mailReGex.test(email.value)) {
    helpStr.innerHTML = "wrong email";
    return false;
  } else {
    helpStr.innerHTML = "the right value";
    return true;
  }
}
​
​
function finalValidate(form, helpStr) {
  if (zipReGex.test(zipcode.value) == true && birthdayReGex.test(birthday.value) == true && telReGex.test(tel.value) == true && mailReGex.test(email.value) == true) {
    helpStr.innerHTML = "ok!";
    return true;
  } else {
    helpStr.innerHTML = "oops";
    return false;
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers