<!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. Windows 调色板
			
    目录 第1章调色板    1 1.1 为什么要使用调色板    1 1.2 使用调色板    2 1.2.1 创建逻辑调色板    2 1.2.2 使用    3 1.2.3 销毁逻辑调色板    4 ...
    
			
    2. 
						
  2. 集成代码编辑器ACE的经验
			
    ACE是最流行的在线代码编辑器之一,在CanTK的集成开发环境GameBuilder里也使用了ACE.ACE的功能非常强大,但是由于使用方法不当,大家反映GameBuilder的代码编辑器不好用.最近 ...
    
			
    3. 
						
  3. Cmd Markdown 简明语法手册
			
    『Cmd 技术渲染的沙箱页面,点击此处编写自己的文档』 Cmd Markdown 简明语法手册 标签: Cmd-Markdown 1. 斜体和粗体 使用 * 和 ** 表示斜体和粗体. 示例: 这是  ...
    
			
    4. 
						
  4. [saiku] 配置saiku实时展现查询数据
			
    缘起: 在默认的情况下,saiku是不能对数据进行实时展现的,只能通过刷新按钮或者重启服务器来刷新数据 这样以来会有很多的麻烦,每天得手动去刷新,这个操作只有管理员可以操作,在刷新以前客户看到的都是缓 ...
    
			
    5. 
						
  5. div中的字符换行
			
    div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html   1.强制不换行,同时以省略号结尾. <div style ...
    
			
    6. 
						
  6. Nginx+Php-fpm+MySQL+Redis源代码编译安装指南
			
    说明:本教程主要包括以下三个部分: 1. 源代码编译安装Nginx 2. 源代码编译安装php以及mysql.redis扩展模块 3. 配置虚拟主机 文中所涉及安装包程序均提供下载链接,欢迎使用 运行 ...
    
			
    7. 
						
  7. c#中的反射
			
    System.Reflection.AssemblySystem.Activator Assembly assembly = Assembly.load("namespace名") ...
    
			
    8. 
						
  8. FZU 1911 Construct a Matrix
			
    题目链接:Construct a Matrix 题意:构造一个矩阵,要求矩阵的每行每列的和都不相同.矩阵的边长是前n项斐波那契的和. 思路:由sn = 2*(fn-1)+(fn-2)-1,只要知道第n ...
    
			
    9. 
						
  9. php定时执行PHP脚本一些方法总结
			
    本文章总结了php定时执行PHP脚本一些方法总结,有,linux中,windows,php本身的方法,有需要的朋友可参考参考. linux下定时执行php脚本 执行PHP脚本 方法1如果你想定时执行某 ...
    
			
    10. 
						
  10. C#抽象类、抽象方法、抽象属性
			
    定义 在C#中使用关键字 abstract 来定义抽象类和抽象方法. 不能初始化的类被叫做抽象类,它们只提供部分实现,但是另一个类可以继承它并且能创建它们的实例."一个包含一个或多个纯虚函数 ...
    
			
    11.