<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>form表单验证</title>

    <script type="text/javascript">

        // 1.当用户名获得焦点时, 调用函数

        function username_focus(){

            var obj = document.getElementById('username_result');

            obj.style.color = '#666';

            obj.innerHTML = '请输入你的用户名！';

        }

        // 定义函数：当失去焦时验证用户名

        function username_blur(){

            var obj = document.getElementById('username_result');

            var value = document.form1.username.value;

            if( value == '' ){

                obj.style.color = '#f00';

                obj.innerHTML = '用户名不能为空';

                return false;

            } else if( value.length <  || value.length >  ){

               obj.style.color = '#f00';

               obj.innerHTML = '用户名长度应介于5-20之间';

               return false;  

            } else {

                  obj.style.color = '#090';
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>form表单验证</title>

    <script type="text/javascript">

        // 1.当用户名获得焦点时, 调用函数

        function username_focus(){

            var obj = document.getElementById('username_result');

            obj.style.color = '#666';

            obj.innerHTML = '请输入你的用户名！';

        }

        // 定义函数：当失去焦时验证用户名

        function username_blur(){

            var obj = document.getElementById('username_result');

            var value = document.form1.username.value;

            if( value == '' ){

                obj.style.color = '#f00';

                obj.innerHTML = '用户名不能为空';

                return false;

            } else if( value.length < 5 || value.length > 20 ){

               obj.style.color = '#f00';

               obj.innerHTML = '用户名长度应介于5-20之间';

               return false;  

            } else {

                  obj.style.color = '#090';

                  obj.innerHTML = '用户名合法';

                  return true;

            }

        }

        // 2.当密码获得焦点时, 调用函数

        function password_focus(){

            var obj = document.getElementById('password_result');

            obj.style.color = '#666';

            obj.innerHTML = '请输入你的密码';

        }

        // 定义函数：当失去焦点时验证密码

        function password_blur(){

              var obj = document.getElementById('password_result');

              var value = document.form1.password.value;

              if( value.length == 0 ){

                 obj.style.color = '#f00';

                 obj.innerHTML = '密码不能为空';

                 return false;

              } else if( value.length < 5 || value.length > 20 ){

                  obj.style.color = '#f00';

                  obj.innerHTML = '密码长度应介于5-20之间的字符';

                  return false;

              } else {

                  obj.style.color = '#090';

                  obj.innerHTML = '密码合法！';

                  return true;

              }

        }

        // 点击'提交'按钮时, 来一个统一的验证

        function checkForm(){

            // 将用户失去焦点的验证的结果, 赋给一个变量

            var userName = username_blur();

            var passWord = password_blur();

            if( userName && passWord ){

                alert('验证通过');

                return true;

            } else {

                alert('验证失败');

                return false;

            }

        }

        // 函数初始化

        function init(){

            document.form1.username.focus();

        }

    </script>

</head>

<body onload="init()">

<form name="form1" method="get" action="login.php" onsubmit="return checkForm()">

<table width="500" border="0" align="center">

    <tr>

        <td align="right"><b>用户名：</b></td>

        <td><input type="text" name="username" onfocus="username_focus()" onblur="username_blur()" /></td>

        <td width="250"><span id="username_result"></span></td>

    </tr>

    <tr>

        <td align="right"><b>密码：</b></td>

        <td><input type="password" name="password" onfocus="password_focus()" onblur="password_blur()" /></td>

        <td><span id="password_result"></span></td>

    </tr>

    <tr>

        <td align="right"> </td>

        <td colspan="2"><input type="submit" value="提交表单" /></td>

    </tr>

</table>

</form>

</body>

</html>



　　


obj.innerHTML = '用户名合法'; return true; } } // 2.当密码获得焦点时, 调用函数  function password_focus(){ var obj = document.getElementById('password_result'); obj.style.color = '#666'; obj.innerHTML = '请输入你的密码'; } // 定义函数：当失去焦点时验证密码  function password_blur(){ var obj = document.getElementById('password_result'); var value = document.form1.password.value; if( value.length ==  ){ obj.style.color = '#f00'; obj.innerHTML = '密码不能为空'; return false; } else if( value.length <  || value.length >  ){ obj.style.color = '#f00'; obj.innerHTML = '密码长度应介于5-20之间的字符'; return false; } else { obj.style.color = '#090'; obj.innerHTML = '密码合法！'; return true; } } // 点击'提交'按钮时, 来一个统一的验证  function checkForm(){ // 将用户失去焦点的验证的结果, 赋给一个变量 var userName = username_blur(); var passWord = password_blur(); if( userName && passWord ){ alert('验证通过'); return true; } else { alert('验证失败'); return false; } } // 函数初始化  function init(){ document.form1.username.focus(); } </script> </head> <body onload="init()"> <form name="form1" method="get" action="login.php" onsubmit="return checkForm()"> <table width="" border="" align="center"> <tr> <td align="right"><b>用户名：</b></td> <td><input type="text" name="username" onfocus="username_focus()" onblur="username_blur()" /></td> <td width=""><span id="username_result"></span></td> </tr> <tr> <td align="right"><b>密码：</b></td> <td><input type="password" name="password" onfocus="password_focus()" onblur="password_blur()" /></td> <td><span id="password_result"></span></td> </tr> <tr> <td align="right">&nbsp;</td> <td colspan=""><input type="submit" value="提交表单" /></td> </tr> </table> </form> </body> </html>


												


											
form表单验证2的更多相关文章
	

    
						
  1. form表单验证-Javascript
		
    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
    
		
    2. 
						
  2. django之form表单验证
		
    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...
    
		
    3. 
						
  3. python_way day19 HTML-day5 （form表单验证，CSRF,cookie，session,缓存）
		
    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...
    
		
    4. 
								
  4. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作
		
    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...
    
		
    5. 
						
  5. [php基础]PHP Form表单验证:PHP form validator使用说明
		
    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
    
		
    6. 
						
  6. django form表单验证
		
    一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html ...
    
		
    7. 
						
  7. Django中的Form表单验证
		
    回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...
    
		
    8. 
						
  8. 抽屉之Tornado实战（7）--form表单验证
		
    在这里,我们把form表单验证的代码进行工具化了,以后稍微修改一下参数就可以拿来用了 先贴上代码 forms.py from backend.form import fields class Base ...
    
		
    9. 
						
  9. ASP.NET MVC Form表单验证与Authorize特性
		
    一.Form表单验证 1.基本概念 表单验证是一个基于票据(ticket-based)[也称为基于令牌(token-based)]的系统.当用户登录系统以后,会得到一个包含基于用户信息的票据(tick ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Unity3D中目标相对自身的前后左右方位判断
			
    http://blog.csdn.net/cen616899547/article/details/38336185 在做rpg类游戏的过程中,经常遇到要判断周围怪物相对自身的方位   1.判断目标在 ...
    
			
    2. 
						
  2. 理论与实践中的 C# 内存模型，第 2 部分
			
    转载自:https://msdn.microsoft.com/zh-cn/magazine/jj883956.aspx 这是介绍 C# 内存模型的系列文章的第二篇(共两篇). 正如在 MSDN 杂志十 ...
    
			
    3. 
						
  3. python 练习 29
			
    Python Number 数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变 Number 数据类型的值,将重新分配内存空间. 以下实例在变量赋值时 Number 对象将被创建: v ...
    
			
    4. 
						
  4. [HBuilder] 简介
			
    官网首页: http://www.dcloud.io/runtime.html 特点: 编码比其他工具快5倍 代码输入法:按下数字快速选择候选项 可编程代码块:一个代码块,少敲50个按键 内置emme ...
    
			
    5. 
						
  5. [redis] redis 存取键值对常用的三种使用方式 - Jedis、JedisPool、Jedis分布式
			
    |-Jedis 普通方式 |-JedisPool 连接池方式(需要引入pool相关jar) |-Jedis 分布式 (需要引入pool相关jar) 引入jedis2.7.0和commons.pool2 ...
    
			
    6. 
						
  6. 固定定位fixed（IE6）
			
     position: fixed;          left:200px;          top:100px;          _left:200px;          _top:100px ...
    
			
    7. 
						
  7. php中PCRE正则表达式分隔符的使用
			
    转自:http://www.baiwar.com/post/the-use-of-php-pcre-regex-delimiter.html 在php5.3.0以前,PHP可使用两套正则表达式规则,一 ...
    
			
    8. 
						
  8. Graphical installers are not supported by the vm
			
    http://www-01.ibm.com/support/docview.wss?uid=swg21462180 Technote (troubleshooting) Problem(Abstrac ...
    
			
    9. 
						
  9. API 菜单函数
			
    AppendMenu 在指定的菜单里添加一个菜单项 CheckMenuItem 复选或撤消复选指定的菜单条目 CheckMenuRadioItem 指定一个菜单条目被复选成"单选" ...
    
			
    10. 
						
  10. ZOJ 3652 Maze 模拟,bfs,读题 难度:2
			
    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4842 要注意题目中两点: 1.在踏入妖怪控制的区域那一刹那,先减行动力,然后才 ...
    
			
    11.