js进行表单验证实例分析_javascript技巧

本文实例讲述了js进行表单验证的方法。分享给大家供大家参考。具体实现方法如下：

1. 传统的表单验证代码

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name="login_form" method="post" onsubmit="return check()"> 
      <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 type="submit" value="注册" /> 
      </div> 
  </form> 
</body> 
</html>

2. 输入框后面有提示信息的表单验证

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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; 
          
       $("emailinfo").innerHTML = ""; 
       $("passwordinfo").innerHTML = ""; 
       $("repasswordinfo").innerHTML = ""; 
       $("nameinfo").innerHTML = ""; 
        
       if(email == "") { 
          $("emailinfo").innerHTML = "Email值不能为空"; 
           $("email").focus(); 
           return false; 
       } 
        
       if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { 
           $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; 
           $("email").focus(); 
           return false; 
       } 
        
       if(password == "") { 
           $("passwordinfo").innerHTML = "密码不能为空"; 
           $("password").focus(); 
           return false; 
       } 
        
       if(password.length < 6) { 
           $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; 
           $("password").focus(); 
           return false; 
       } 
        
       if(repassword != password) { 
           $("repasswordinfo").innerHTML = "两次输入的密码不一致"; 
           $("repassword").focus(); 
           return false; 
       } 
        
       if(name == "") { 
          $("nameinfo").innerHTML = "姓名不能为空"; 
           $("name").focus(); 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $("nameinfo").innerHTML = '姓名中不能包含数字'; 
               $("name").focus(); 
               return false; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name="login_form" method="post" onsubmit="return check()"> 
      <div> 
           Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span> 
      </div>    
      <div> 
           密码:<input type="password" name="password" id="password" /><span id="passwordinfo"></span> 
      </div> 
      <div> 
          重输密码:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span> 
      </div> 
      <div> 
          姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span> 
      </div> 
      <div> 
          <input type="submit" value="注册" /> 
      </div> 
  </form> 
</body> 
</html>

效果图如下所示：

3. 在输入框失去焦点时触发校验函数

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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; 
          
       $("emailinfo").innerHTML = ""; 
       $("passwordinfo").innerHTML = ""; 
       $("repasswordinfo").innerHTML = ""; 
       $("nameinfo").innerHTML = ""; 
        
       if(email == "") { 
          $("emailinfo").innerHTML = "Email值不能为空"; 
           return false; 
       } 
        
       if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { 
           $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; 
           return false; 
       } 
        
       if(password == "") { 
           $("passwordinfo").innerHTML = "密码不能为空"; 
           return false; 
       } 
        
       if(password.length < 6) { 
           $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; 
           return false; 
       } 
        
       if(repassword != password) { 
           $("repasswordinfo").innerHTML = "两次输入的密码不一致"; 
           return false; 
       } 
        
       if(name == "") { 
          $("nameinfo").innerHTML = "姓名不能为空"; 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $("nameinfo").innerHTML = '姓名中不能包含数字'; 
               return false; 
           } 
       } 
   } 
    
   function checkEmail() {  //校验Email 
       $('emailinfo').innerHTML = ""; 
       var email = $('email').value; 
       if(email == "") { 
            $('emailinfo').innerHTML = "Email值不能为空"; 
            return false; 
       } 
        
       if(email.indexOf('@') == -1 || email.indexOf('.') == -1) { 
            $('emailinfo').innerHTML = "Email必须包含@和."; 
            return false; 
       } 
   } 
    
   function checkPassword() {  //校验密码 
      $('passwordinfo').innerHTML = ""; 
      var password = $('password').value; 
      if(password == "") { 
          $("passwordinfo").innerHTML = "密码不能为空"; 
          return false; 
      } 
    
     if(password.length < 6) { 
         $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; 
         return false; 
      } 
   } 
    
   function checkRepassword() { //校验重新输入的密码 
      $('repassword').innerHTML = ""; 
      var repassword = $('repassword').value; 
      if(repassword != password) { 
           $("repasswordinfo").innerHTML = "两次输入的密码不一致"; 
           return false; 
       } 
   } 
    
   function checkName() {  //校验姓名 
       $('nameinfo').innerHTML = ""; 
       var name = $('name').value; 
       if(name == "") { 
          $("nameinfo").innerHTML = "姓名不能为空"; 
           return false; 
       } 
        
       for(var i = 0; i < name.length; i++) { 
           var j = name.subString(i , i+1); 
           if(isNaN(j) == false) { 
               $("nameinfo").innerHTML = '姓名中不能包含数字'; 
               return false; 
           } 
       } 
   } 
</script> 
</head> 
<body> 
  <form name="login_form" method="post" onsubmit="return check()"> 
      <div> 
           Email:<input type="text" name="email" id="email" onblur="checkEmail();"/><span id="emailinfo"></span> 
      </div>    
      <div> 
           密码:<input type="password" name="password" id="password" onblur="checkPassword();"/><span id="passwordinfo"></span> 
      </div> 
      <div> 
          重输密码:<input type="password" name="repassword" id="repassword" onblur="checkRepassword();"/><span id="repasswordinfo"></span> 
      </div> 
      <div> 
          姓名：<input type="text" name="name" id="name" onblur="checkName();"/><span id="nameinfo"></span> 
      </div> 
      <div> 
          <input type="submit" value="注册" /> 
      </div> 
  </form> 
</body> 
</html>

效果图如下所示：

希望本文所述对大家的javascript程序设计有所帮助。

时间： 2024-10-30 11:47:09

js进行表单验证实例分析_javascript技巧的相关文章

js表单验证实例讲解_javascript技巧

本文实例为大家分享了js表单验证,供大家参考,具体内容如下 JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证. 被JavaScript 验证的这些典型的表单数据有: 1).用户是否已填写表单中的必填项目? 2).用户输入的邮件地址是否合法? 3).用户是否已输入合法的日期? 4).用户是否在数据域 (numeric field) 中输入了文本?  gspan.html <html> <head> <title>表单验证实例<

JS常用表单验证方法总结_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

Javascript的表单验证-初识正则表达式_javascript技巧

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 验证日期 日期的格式相对特别,不能光凭其长度来验证 常见的日期格式:先以两位数表示日,再以两位数表示月,最后以四位数表示年,期间以斜线分隔. MM/DD/YYYY 博主:怎样设计出验证日期是否符合格式的代码呢? 先来看一下验证日期格式的逻辑吧 将表单域中的值取出,

JS控制表单提交的方法_javascript技巧

本文实例讲述了JS控制表单提交的方法.分享给大家供大家参考.具体如下: <Script Language="JavaScript"> function autoSubmit(){ var form = document.forms[0]; var actionPath = "?mo=phone"; form.action = actionPath; form.submit(); return true; } </Script> 如果需要两个提

Validform表单验证总结篇_javascript技巧

近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法: Demo: $(".demoform").Validform({//$(".demoform")指明是哪一表单需要验证,名称需加在form表单上; btnSubmit:"#btn_sub", //#btn_sub是该表单下要绑定点击提交表单事件的按钮;如果form内含有submit按钮该参数可省略; btnReset:"

JS瀑布流实现方法实例分析_javascript技巧

本文实例分析了JS瀑布流实现方法.分享给大家供大家参考,具体如下: 描述: 1.每个图片宽度都一样,高度不一样 思路: 1.算出一共有几列(通过视窗总宽度/单个图片宽度得出) 2.根据一共几列*单个图片宽度,设置外围总宽度并水平居中(注:这个宽度应该是计算出来的,而不是定死,因为窗口大小会改变) 3.将第一行图片高度按顺序填充进数组 4.算出第一行图片里高度最短的那个,将第二行的第一张图片添加到其后(绝对定位),添加完第二行第一张,更新他的高度,然后重新计算最短,再开始之前的过程 5.鼠标在滑动

JS获取鼠标坐标位置实例分析_javascript技巧

本文实例分析了JS获取鼠标坐标位置的方法.分享给大家供大家参考,具体如下: 取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置(screenX,screenY)在所有的浏览器中都支持,但是鼠标在页面的坐标位置(pageX,pageY)在IE8及更早版本不支持,但是没有关系,可以通过s

JS深度拷贝Object Array实例分析_javascript技巧

本文实例分析了JS深度拷贝Object Array.分享给大家供大家参考,具体如下: function cloneObj(o) { var isArray = o instanceof Array; var isObject = o instanceof Object; if (!isObject) return o; var n = (isArray ? [] : {}); for (var k in o) n[k] = cloneObj(o[k]); return n; } 遇到的问题 ty

JS限制条件补全问题实例分析_javascript技巧

本文实例分析了JS限制条件补全问题.分享给大家供大家参考,具体如下: 题目一.a和b两个变量,不用第三个变量来切换两个变量值 var a=5; var b=6; a=a+b; b=a-b; a=a-b; alert(a); alert(b); 题目二.有一个数n=5,不用for循环,怎样返回[1,2,3,4,5]这样的数组 方法一.用递归来进行遍历 var n=5; function show(){ var arr=[]; return (function(){ arr.unshift(n);