<!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. 安卓App热补丁动态修复技术介绍
			
    版权声明:本文由johncz原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/169 来源:腾云阁 https://www.q ...
    
			
    2. 
						
  2. 用NAN简化Google V8 JS引擎的扩展
			
    通过C++扩展Google V8 JS引擎的文章很多,Google V8 JS带的例子也容易明白.但是大部分文章都是Hello World型的,真正使用时发现处处是坑.扩展V8最经典的例子就是node ...
    
			
    3. 
						
  3. python 练习 7
			
    #!/usr/bin/python # -*- coding: utf-8 -*- def gcd(x,y): #最大公因子 if x>y:x%=y while x: x,y=y%x,x ret ...
    
			
    4. 
						
  4. [mondrian] 分析一个简单的schema文件
			
    <?xml version="1.0" encoding="UTF-8"?> <Schema name="Mondrian" ...
    
			
    5. 
						
  5. 张艾迪（创始人）：出现在世界224C之前的这些时间
			
    出现在世界224C之前的这些时间 坐在大巴车上.用手塞住耳朵.繁杂的大巴车上.总会听见不喜欢听的声音.那时只有22.23岁的我.就像发明一些东西把所有不喜欢的声音都屏蔽掉.就像防火墙一样.那时候拥抱所 ...
    
			
    6. 
						
  6. 张艾迪（创始人）：发明Global.World.224C的天才
			
    Eidyzhang: Genius.Founder.CEO.23 I 世界级最高级创始人.世界最高级FounderCEO 出生在亚洲中国.Eidyzhang 拥有黑色头发白色皮肤(20岁)大学辍学生. ...
    
			
    7. 
						
  7. div中的字符换行
			
    div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html   1.强制不换行,同时以省略号结尾. <div style ...
    
			
    8. 
						
  8. Druid：一个用于大数据实时处理的开源分布式系统
			
    Druid是一个用于大数据实时查询和分析的高容错.高性能开源分布式系统,旨在快速处理大规模的数据,并能够实现快速查询和分析.尤其是当发生代码部署.机器故障以及其他产品系统遇到宕机等情况时,Druid仍 ...
    
			
    9. 
						
  9. IE9中Media queries在iframe无效的解决方法
			
    在css中有5个media querie @media screen and(min-width:0px)and(max-width:319px){ body {background-color:re ...
    
			
    10. 
						
  10. replace(),indexOf(),substring(),split(),join(),——各种小知识点
			
    1.replace ———— 实现去除指定字符串功能,可以用空字符串代替,也可以去新字符代替已有的字符. var str="123_z.jpg"; str=str.replace( ...
    
			
    11.