首页
所有分类
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 相关文章推荐
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
浅析JavaScript中的平稳退化（graceful degradation）
Jul 24 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
MX500(1) S2000(3) YB217(1) YB400(2) 直流胆(1) YB235(1) PL660(1) 森海(1) 台湾(1) 南麂列岛(1)
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python 实现try重新执行
2019/12/21 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
Eastbay官网：美国最大的运动鞋网络零售商
2016/07/27 全球购物
Daisy London官网：英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Unineed旗下时尚轻奢网站：FABHunt
2019/05/13 全球购物
荷兰照明、灯具和配件网上商店：dmlights
2019/08/25 全球购物
便利店的创业计划书
2014/01/15 职场文书
九年级英语教学反思
2014/01/31 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2016消防宣传标语口号
2015/12/26 职场文书