首页
所有分类
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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
jquery图片滚动放大代码分享（1）
Aug 25 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 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
RNA(2) 毅力号(1) 陨石(1) 美国航天局(1) NASA(1) 火星(2) 大脑(1) 数据(1) 嘧啶碱基(2) 富碳陨石(1)
You might like
PHP+Tidy－完美的XHTML纠错+过滤
2007/04/10 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
Yii实现简单分页的方法
2016/04/29 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
Vue程序调试的方法
2019/06/17 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
基于vuex实现购物车功能
2021/01/10 Vue.js
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python 的 with 语句详解
2014/06/13 Python
Python实现批量下载文件
2015/05/17 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
极简的HTML5模版
2015/07/09 HTML / CSS
复古斯堪的纳维亚儿童服装：Baby go Retro
2017/09/09 全球购物
导游词范文
2015/02/13 职场文书
八年级作文之友情
2019/11/25 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
深入详解JS函数的柯里化
2021/06/09 Javascript
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript