`

一个基于JQuery的登录验证[修正]

jQueryJavaScriptCSSHTMLJSP 
阅读更多

 

一个基于JQuery的登录验证示例。

 

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script type="text/javascript">
			var log = {};
			$(document).ready(function() {
				$.extend($.fn, {
					reg:function(r, m) {
						$(this).bind('blur', function() {
							$(this).rt(r.test($(this).val()), this.id, m);
						});
					},
					eq:function(r, m) {
						$(this).bind('blur', function() {
							$(this).rt($(this).val() == $('#' + r).val(), this.id, m);
						});
					},
					rt:function(r, d, m) {
						var o = '#' + d + 'Error';
						if (r) {
							$(o).html('');
							log[d] = true;
						} else {
							$(o).html(m).css('display', 'inline-block');
							log[d] = false;
						}
					}
				});
				$('#userName').reg(/^[0-9a-zA-Z]{3,16}$/, 'error');
				$('#password').reg(/^[0-9a-zA-z]{3,16}$/, 'error');
				$('#password2').eq('password', 'error');
				// 中文/^[\u4E00-\u9FA5]{1,16}$/
				$('#form1').submit(function() {
					$('#userName, #password, #password2').trigger('blur');
					for (var o in log) {
						if (!log[o]) {
							return false;
						}
					}
				});
			});
		</script>
	</head>

	<body>
		<form id="form1" action="model.jsp" method="post" >
			用户名：<input type="text" id="userName" name="userName" /><span id="userNameError"></span><br />
			密码：<input type="password" id="password" name="password" /><span id="passwordError"></span><br />
			重复密码：<input type="password" id="password2" name="password" /><span id="password2Error"></span><br />
			<input type="submit" value="提交" /> <input type="reset" value="重置" />
		</form>
	</body>
</html>
 

 

其中，reg:function(r, m)是验证本对象是否符合正则r,不符合显示提示信息m

eq:function(r, m)是验证本对象是否与id为r的对象的值相等，不等显示提示信息m

rt:function(r, d, m)是因为上面两个方法有重复代码，所以提练出的方法。

 

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
		<script type="text/javascript">
			var log = {};
			$(document).ready(function() {
				$.extend($.fn, {
					reg:function(r, m) {
						$(this).bind('blur', function() {
							$(this).rt(r.test($(this).val()), this.id, m);
						});
					},
					eq:function(r, m) {
						$(this).bind('blur', function() {
							$(this).rt($(this).val() == $('#' + r).val(), this.id, m);
						});
					},
					rt:function(r, d, m) {
						var o = '#' + d + 'Error';
						if (r) {
							$(o).html('');
							log[d] = true;
						} else {
							$(o).html(m).css('display', 'inline-block');
							log[d] = false;
						}
					}
				});
				$('#userName').reg(/^[0-9a-zA-Z]{3,16}$/, 'error');
				$('#password').reg(/^[0-9a-zA-z]{3,16}$/, 'error');
				$('#password2').eq('password', 'error');
				// 中文/^[\u4E00-\u9FA5]{1,16}$/
				
			});
			function validate() {
				var flag = true;
				$('#userName, #password, #password2').trigger('blur');
				for (var o in log) {
					if (!log[o]) {
						flag =  false; 
						break;
					}
				}
				return flag;
			}
		</script>
	</head>

	<body>
		<form id="form1" action="model.jsp" method="post" onsubmit="return validate()">
			用户名：<input type="text" id="userName" name="userName" /><span id="userNameError"></span><br />
			密码：<input type="password" id="password" name="password" /><span id="passwordError"></span><br />
			重复密码：<input type="password" id="password2" name="password" /><span id="password2Error"></span><br />
			<input type="submit" value="提交" /> <input type="reset" value="重置" />
		</form>
	</body>
</html>
 

 

 

 

分享到：
| 汉字转换位汉语拼音
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery表单验证插件EasyValidator 2.0带TIP提示效果

    EasyValidator 2.0是基于jQuery的轻量级表单验证插件，它的主要目标是帮助开发者快速实现表单验证，同时提供美观的提示效果。通过使用该插件，开发者可以轻松地对表单字段进行各种验证规则设置，如非空检查、邮箱...

    jQuery.validate验证

    在使用jQuery.validate之前，你需要先引入jQuery库，因为validate是基于jQuery构建的。通常，你会在HTML文件中添加如下代码来引入jQuery和validate库： ```html &lt;script src="path/to/jquery.js" type="text/...

    jQuery带验证登录表单插件.rar

    【jQuery带验证登录表单插件】是一款针对网页登录界面设计的、基于jQuery库的验证插件，旨在提供用户友好的交互体验和高效的数据验证功能。这个插件可以帮助开发者快速构建一个具有验证功能的登录表单，确保用户输入...

    jquery表单验证插件

    而“jQuery表单验证插件”则是基于jQuery的一个强大工具，它使得表单验证变得更加简单和高效。本文将深入探讨这个插件的相关知识点，包括其工作原理、主要功能、使用方法以及一些实用技巧。 一、工作原理 jQuery...

    jquery自编的一个验证插件

    本主题将深入探讨一个基于jQuery自编的验证插件，该插件提供了一种简单的方式来实现表单验证。 标题“jquery自编的一个验证插件”表明我们讨论的是一个用户自定义的jQuery扩展，用于增强表单验证功能。通常，这样的...

    基于jQuery的SQL注入攻击防范实现

    本文提出的解决方案是开发一个基于jQuery的插件，该插件能够在客户端验证用户输入，有效地阻止潜在的SQL注入攻击。具体实现步骤如下： 1. **输入验证**：利用jQuery的事件处理功能，对用户输入的每个字段进行实时...

    jQuery腾讯云诊断域名表单验证特效.zip

    【jQuery腾讯云诊断域名表单验证特效】是一个用于网站域名输入验证的JavaScript代码实现，它基于流行的jQuery库，为用户提供了一种高效、简洁的方式来确保用户在填写表单时输入的域名信息是有效且符合规范的。...

    基于Bootstrap的jQuery登录表单html模板.zip

    这个“基于Bootstrap的jQuery登录表单html模板”压缩包提供了一个现成的解决方案，帮助开发者快速构建一个功能完备且设计美观的登录页面。 Bootstrap是由Twitter开发的一个开源前端框架，它提供了一系列预设的CSS...

    JQuery验证框架jqBootstrapValidation.zip

    `jqBootstrapValidation`是一个基于jQuery的轻量级验证框架，专门设计用于增强Bootstrap框架中的表单验证功能。这个框架的主要目标是提供一种简便的方法来确保用户输入的数据符合预设的规则，从而提高网页表单的用户...

    一款实用的jquery表单验证插件webluker.zip

    5. **兼容性**：基于jQuery构建，Webluker与大多数现代浏览器兼容，包括Chrome、Firefox、Safari、Edge和IE9+。 6. **可扩展性**：该插件设计时考虑了扩展性，可以与其他jQuery插件或前端框架（如Bootstrap）无缝...

    JQuery验证框架 （实用）

    jQuery验证框架是一款非常实用的前端数据验证工具，它为开发者提供了便捷、高效的方法来确保用户在表单提交时输入的数据符合预设的规则。这个框架具有详细注释，易于理解，且经过了严格的测试，保证了其稳定性和可靠...

    基于jQuery实现的Ajax 验证用户名唯一性实例代码

    在本文中，我们将详细探讨如何利用jQuery结合Ajax技术来实现网页中用户名的唯一性验证功能...通过阅读本文，读者应能掌握基于jQuery和Ajax实现用户名唯一性验证的核心思路和实现方法，并能将其应用于自己的项目开发中。

    jquery.validate.js表单验证借鉴.pdf

    jQuery Validate 是一个强大的基于 jQuery 的表单验证插件，它为网页开发人员提供了一种简单而灵活的方式来实现表单数据的验证。这个插件能够帮助我们确保用户输入的数据符合我们设定的规则，从而提高用户体验并减少...

    jquery.validate.js表单验证.pdf

    jQuery Validate 是一个强大的JavaScript库，它是基于jQuery设计的，专门用于网页表单验证。这个库提供了丰富的功能，能够轻松地实现各种验证规则，包括基本的非空检查、长度限制、邮箱格式验证，甚至复杂的自定义...

    jquery validate 信息气泡提示

    总之，通过 jQuery Validate 和 PoshyTip 的结合，我们可以构建一个功能强大且用户体验良好的表单验证系统，有效地提示用户修正错误，提高表单填写的准确性。同时，PoshyTip 提供的丰富配置选项使得提示信息的样式和...

    JQuery插件 IP地址输入框

    总之，"JQuery插件 IP地址输入框"提供了一个方便的解决方案，用于在网页上创建用户友好的IP地址输入控件，尽管在IE浏览器下可能存在一些挑战，但通过适当的优化和调整，可以克服这些限制，实现全平台的良好体验。

    jquery仿微信开放平台选项卡带步骤的注册表单验证代码.rar

    该压缩包文件“jquery仿微信开放平台选项卡带步骤的注册表单验证代码.rar”包含了一个基于jQuery实现的，模仿微信开放平台注册流程的前端页面。这个页面的主要功能包括选项卡切换和表单验证，旨在提供一个类似微信...

    jquery validate 使用详解

    jQuery Validate 是一款强大的表单验证插件，基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能，大大提高了用户体验并减少了服务器端的压力。通过简单地配置选项，即可启用各种内置验证规则。...

Magicbox
Global site tag (gtag.js) - Google Analytics