js进行表单验证实例分析

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • JS实现的通用表单验证插件完整实例

    JS实现的通用表单验证插件完整实例

    本文实例讲述了JS实现的通用表单验证插件.分享给大家供大家参考.具体如下: 这里演示一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • jquery validate.js表单验证入门实例（附源码）

    jquery validate.js表单验证入门实例（附源码）

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • JavaScript表单验证实例之验证表单项是否为空

    表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

  • php用户注册页面利用js进行表单验证具体实例

    复制代码 代码如下: <!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 ht

  • js进行表单验证实例分析

    js进行表单验证实例分析

    本文实例讲述了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/199

  • 纯JS实现表单验证实例

    纯JS实现表单验证实例

    表单我实现了,input属性是text(文本框).radio(单选按钮).checkbox(多选按钮)的知识点, fieldset标签(组合表单中的相关元素).select标签(选择列表)和textarea标签(多行文本框). <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return check

  • js表单验证实例讲解

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

  • 原生js 实现表单验证功能

    原生js 实现表单验证功能

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验证.密码验证.日期验证.手机验证.邮箱验证,密码验证等. 现在就来完成这些验证代码的编写,先来看字母是怎么验证的.先编写需要的html代码,创建一个id为formContainer的表单元素,在里面加入需要验证英文字母的文本框和按钮,文本框后面需要一个span元素存放提示文字.如下所示: <form

  • AngularJs表单验证实例代码解析

    AngularJs表单验证实例代码解析

    常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

  • Angular表单验证实例详解

    Angular表单验证实例详解

    表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht

  • BootStrap表单验证实例代码

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap表单验证实例代码,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@

  • jquery实现一个简单的表单验证实例

    表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

  • JS简单表单验证功能完整示例

    JS简单表单验证功能完整示例

    本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

随机推荐