首页
所有分类
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 相关文章推荐
JavaScript中rem布局在react中的应用
Dec 09 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
JavaScript门面模式详解
Oct 19 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 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
广播(8) 长波(3) 保养(1) 短波(8) 立体声(1) 中波(3) 收音机(62) 电台频率(32) KDKA(1) Harman Kardon(1)
You might like
php中处理模拟rewrite 效果
2006/12/09 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
JavaScript 组件之旅（一）分析和设计
2009/10/28 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
js定时器实例分享
2016/12/20 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
日本非常有名的内衣丝袜品牌：GUNZE
2017/01/06 全球购物
Spartoo瑞典：鞋子、包包和衣服
2018/09/15 全球购物
碧欧泉法国官网：Biotherm法国
2019/10/23 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
开学典礼主持词
2014/03/19 职场文书
服务承诺书怎么写
2014/05/24 职场文书
员工教育培训协议书
2014/09/27 职场文书
2016年清明节寄语
2015/12/04 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
Flask搭建一个API服务器的步骤
2021/05/28 Python
python使用torch随机初始化参数
2022/03/22 Python