JavaScript 表單驗證程式碼例項

admin發表於2019-03-26
JavaScript

本文分享一段通過JavaScript實現的簡單表單驗證程式碼例項。

不使用任何HTML5新增的表單驗證特性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function checkForm(form) {
  let reg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  if(form.username.value == "") {
    alert("使用者名稱不能為空!");
    form.username.focus();
    return false;
  }
  if(form.password.value == "") {
    alert("密碼不能為空!");
    form.password.focus();
    return false;
  }
  if(form.email.value==""){
    alert("郵箱不能為空!");
    form.email.focus();
    return false;
  }else if(!reg.test(form.email.value)){
    alert("郵箱格式不正確!");
    form.email.focus();
    return false;
  }
  return true;
}
window.onload = function () {
  var myform = document.forms[0];
  myform.onsubmit = function () {
    return checkForm(this);
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  姓名：<input type="text" name="username"/><br/>
  密碼：<input type="password" name="password" /><br/>
  郵箱：<input type="text" name="email" /><br/>
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

上面是一段簡單的表單驗證效果，它實現如下功能：

（1）.姓名、密碼和郵箱是否為空驗證。

（2）.郵箱格式正確性驗證效果。

相關文章