<!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. 关于电脑玩MT以及多开的方法
			
    方法是转的别人的首先感谢原创者!!上四开屏幕截图,因为小伙伴需要8张卡,所以我四个四个一起练.8开我的电脑估计都有压力,五开六开可能没问题,但是为了方便就四开,练完四个再练四个.图接下来说下多开模拟器 ...
    
			
    2. 
						
  2. 如何设计一个RPC系统
			
    版权声明:本文由韩伟原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/162 来源:腾云阁 https://www.qclou ...
    
			
    3. 
						
  3. jq--回到顶部
			
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
			
    4. 
						
  4. static与C#中的static
			
    Static 1.静态方法与非静态方法 a.静态方法的调用类.静态方法名([参数列表]) 非静态方法的调用类 对象 = new 类的构造函数([参数列表])对象.非静态方法名([参数列表]) 静态方法 ...
    
			
    5. 
						
  5. listbox鼠标拖动数据和为button注册快捷键
			
    将listbox1中的数据用鼠标拖动至listbox2,即有左至右. 分别对应控件注册如下事件DragEnter,MouseDown,DragDrop 代码如下: //P128 DataGridVie ...
    
			
    6. 
						
  6. Eclipse上安装GIT插件EGit
			
    一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...
    
			
    7. 
						
  7. orcl
			
    Class.forName("orcle.jdbc.driver.OracleDriver"); Connection conn=DriverManager.getConnecti ...
    
			
    8. 
						
  8. MVC中使用HTML Helper类扩展HTML控件
			
    文章摘自:http://www.cnblogs.com/zhangziqiu/archive/2009/03/18/1415005.html MVC在view页面,经常需要用到很多封装好的HTML控件 ...
    
			
    9. 
						
  9. NoSQL你知多少？
			
    1.NoSQL是什么? NoSQL 是 Not Only SQL 的缩写,意即"不仅仅是SQL"的意思,泛指非关系型的数据库.强调Key-Value Stores和文档数据库的优点 ...
    
			
    10. 
						
  10. Servlet页面跳转实现方法的区别
			
    一直对Servlet页面跳转的几种方式理解的糊里糊涂的,今天在网上搜了一把,找到一遍比较好的,记下来,以后看看. Servlet页面跳转分两部分,一是发生在Servlet,一是在JSP,其实JSP也就 ...
    
			
    11.