首页
所有分类
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 相关文章推荐
添加到收藏夹代码（兼容几乎所有的浏览器）
Jan 09 Javascript
ASP Json Parser修正版
Dec 06 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
JavaScript运行机制实例分析
Apr 11 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
调频(4) 中波(3) Harman Kardon(1) 长波(3) 保养(1) KDKA(1) 立体声(1) 收音机(62) 电台频率(32) 短波(8)
You might like
php修改NetBeans默认字体的大小
2013/07/02 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP微信API接口类
2016/08/22 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
jQuery自带的一些常用方法总结
2014/09/03 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
javascript学习之json入门
2016/12/22 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
React优化子组件render的使用
2019/05/12 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Python如何读取、写入JSON数据
2020/07/28 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
Chicco婴儿用品美国官网：汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
彪马西班牙官网：PUMA西班牙
2019/06/18 全球购物
事务机电主管工作职责
2014/02/25 职场文书
母校寄语大全
2014/04/10 职场文书
模具专业求职信
2014/06/26 职场文书
2019关于实习生工作安排及待遇的管理方案！
2019/07/16 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
python入门学习关于for else的特殊特性讲解
2021/11/20 Python