点击提交按钮实现弹出警告框表单验证效果

2023-12-04 13:40:09 前端笔记 157

本章节介绍一下如何实现基本的表单验证功能。

最为常见的一种方式就是当点击提交按钮的时候，如果有表单的内容填写不符合规范那么就会弹出警告框。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>实例</title>
<script type="text/javascript">  
function $(id){  
  return document.getElementById(id);  
}  
      
function check(){  
  var email = $("email").value;  
  var password = $("password").value;  
  var repassword = $("repassword").value;  
  var name = $("name").value;  
          
  if(email == "") {  
    alert("Email值不能为空");  
    $("email").focus();  
    return false;  
  }  
          
  if(email.indexOf("@") == -1 || email.indexOf(".") == -1){  
    alert("邮箱格式不正确,必须包含@和.");  
    $("email").focus();  
    return false;  
  }  
          
  if(password == ""){  
    alert("密码不能为空");  
    $("password").focus();  
    return false;  
  }  
          
  if(password.length < 6) {  
    alert("密码长度必须大于或者等于6");  
    $("password").focus();  
    return false;  
  }  
          
  if(repassword != password) {  
    alert("两次输入的密码不一致");  
    $("repassword").focus();  
    return false;  
  }  
          
  if(name == "") {  
    alert("姓名不能为空");  
    $("name").focus();  
    return false;  
  }  
          
  for(var i = 0; i < name.length; i++) {  
    var j = name.subString(i , i+1);  
    if(isNaN(j) == false) {  
      alert('姓名中不能包含数字');  
      $("name").focus();  
      return false;  
    }  
  }  
} 
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){return check()}
}
</script>
</head>
<body>
<form name="login_form" method="post">
  <div>Email:<input type="text" name="email" id="email"/></div>
  <div>密码:<input type="password" name="password" id="password"/></div>
  <div>重输密码:<input type="password" name="repassword" id="repassword"/></div>
  <div>姓名:<input type="text" name="name" id="name"/></div>
  <div><input id="bt" type="submit" value="注册"/></div>
</form>
</body>
</html>

上面的代码实现了我们的要求，如果表单元素值不满足要求，则会弹出提示框，下面简单介绍一下需要注意的一些问题。

if语句中都有一个return false，这是为了跳出函数的执行，并且能够阻止按钮的默认动作，否则的话依然会提交表单。

focus()方法则是为了使不符合要求的当前表单元素获取焦点。

1.focus()方法可以参阅javascript password.focus()一章节。

2.return false可以参阅javascript return false的作用是什么一章节。

3.indexOf()方法可以参阅javascript String indexOf()一章节。

4.isNaN()方法可以参阅javascript isNaN()一章节。