<!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. sql CHARINDEX函数
			
    CHARINDEX函数返回字符或者字符串在另一个字符串中的起始位置.CHARINDEX函数调用方法如下: CHARINDEX ( expression1 , expression2 [ , start ...
    
			
    2. 
						
  2. Nginx  + Tomcat 配置
			
    Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍.1.启 ...
    
			
    3. 
						
  3. 使用分布式数据库集群做大数据分析之OneProxy
			
    一.十亿数据,轻松秒出 实时监控领域有两个显著的特点,一是数据来源很多而且数据量大,有来自监控摄像头.GPS.智能设备等:二是需要实时处理.我们的客户在做实时处理时,就遇到这样的问题.客户的某个数据表 ...
    
			
    4. 
						
  4. 指针转换（C# 编程指南）
			
    原文地址:https://msdn.microsoft.com/zh-cn/library/etb4xxec.aspx 下表显示了预定义的隐式指针转换.隐式转换可能在多种情形下发生,包括调用方法时和在 ...
    
			
    5. 
						
  5. Ubuntu下解决bash 没有那个文件或目录的方法
			
    因为之前电脑硬盘坏掉,维修换了新硬盘,今天重新安装了ubuntu,装好之后就赶紧搭建工作环境,将备份的资料拷贝进来,搭建交叉编译环境,但是发现,修改bashrc中PATH绝对路径指向交叉编译器后,在命 ...
    
			
    6. 
						
  6. ubuntu修改更新源为163
			
    安装ubuntu后为了使下载及更新软件包更快,需要将自带的源更换为国内的源.以下以163为例: 1.首先备份下原始自带源: sudo cp sources.list /etc/apt/sources. ...
    
			
    7. 
						
  7. kellogg项目总结
			
    1.题目的去随机值去重 (当时做的是每次点击取出一个随机数,并删除数组中位置,后来改成获取10个随机数组成的数组,二者略有差距,修改颇长时间) function getArr(num){ totalA ...
    
			
    8. 
						
  8. nodeschool.io 8
			
    ~~ HTTP COLLECT ~~ Write a program that performs an HTTP GET request to a URL provided toyou as the  ...
    
			
    9. 
						
  9. Qt之QParallelAnimationGroup
			
    简述 QParallelAnimationGroup类提供动画的并行组. QParallelAnimationGroup - 一个动画容器,当它启动的时候它里面的所有动画也启动,即:并行运行所有动画, ...
    
			
    10. 
						
  10. think in java 读书笔记 3 —— 数据报
			
    目录 think in java 读书笔记 1 ——移位 think in java 读书笔记 2 —— 套接字 think in java 读书笔记 3 —— 数据报 概要 1. 数据报基本知识 2 ...
    
			
    11.