首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js进行表单验证实例分析

Posted in Javascript onFebruary 10, 2015

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

效果图如下所示：

js进行表单验证实例分析

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>

效果图如下所示：

js进行表单验证实例分析

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

js进行表单验证实例分析

- Author -

woshisap

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
EasyUi datagrid 实现表格分页
Feb 10 #Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 #Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 #Javascript
JS数组的常见用法实例
Feb 10 #Javascript
bootstrap table 服务器端分页例子分享
Feb 10 #Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 #Javascript
js+css实现导航效果实例
Feb 10 #Javascript
RustDesk(1) 声卡驱动(1) 虚拟键盘(1) 鸿蒙3.0(1) win7(2) 蓝牙(1) 鸿蒙(2) 华为(1) Debian(1) 蓝牙耳机(1)
You might like
当海贼王变成JOJO风
2020/03/02 日漫
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python中的匿名函数使用简介
2015/04/27 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python 图片去噪的方法示例
2019/07/09 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
如何开发安全的AJAX应用
2014/03/26 面试题
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
个人政治思想总结
2015/03/05 职场文书
读《解忧杂货店》有感：请相信一切都是最好的安排
2019/11/07 职场文书
实用干货：敬酒词大全，帮你应付各种场合
2019/11/21 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
排查MySQL生产环境索引没有效果
2022/04/11 MySQL