`
哈达f
  • 浏览: 120283 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

注册表单

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
	border:#0066FF 1px solid;
	width:600px;
	border-collapse:collapse;
	}
table td,table th{
	border:#0066FF 1px solid;
	padding:10px;
	}
table td{
	background-color:#FFFF99;
	}
table th{
	background-color:#FF9900;
	}
#repswspan{
	margin-left:110px;
	}
	
.errorinfo{
	color:#FF0000;
	display:none;
	}
.focus{
	border:#0099FF 2px solid;
	}
.norm{
	border:#999999 1px solid;
	}
.error{
	border:#FF0000 2px solid;
	}
</style>

<script type="text/javascript">

function inputColor(input)
{
	input.className = "norm";
	input.onfocus = function()
	{
		this.className = "focus";
	}
}
window.onload = function()
{
	with(document.forms[0])
	{
		inputColor(user);
		inputColor(psw);
		inputColor(repsw);
		inputColor(mail);
	}
}

//校验方法。
function check(inputNode,regex,divId)
{
	var b = false;
	var divNode = document.getElementById(divId);
	
	if(regex.test(inputNode.value))
	{
		inputNode.className = "norm";
		divNode.style.display = "none";
		b = true;
	}
	else
	{
		inputNode.className = "error";
		divNode.style.display = "block";
	}
	return b;
}

/*
//校验用户名,老式！，麻烦！，已过气。
function checkUserDemo(userNode)
{

	var value = userNode.value;
	var regex = /^\w{3,5}$/;
	var divNode = document.getElementById("userdiv");
	if(regex.test(value))
	{
		userNode.className = "norm";
		divNode.style.display = "none";
	}
	else
	{
		userNode.className = "error";
		divNode.style.display = "block";
	}
	
}
*/
//校验用户名
function checkUser(userNode)
{
	var regex =  /^\w{3,5}$/;
	
	return check(userNode,regex,"userdiv");
}


//校验密码
function checkPsw(pswNode)
{
	var regex = /^[a-z0-9]{3,5}$/i;
	return check(pswNode,regex,"pswdiv");
}

//校验确认密码 
function checkRepsw(repswNode)
{
	var b = false;
	var value1 = repswNode.value;
	var value2 = document.getElementsByName("psw")[0].value;
	var divNode = document.getElementById("repswdiv");
	if(value1==value2)
	{
		
		repswNode.className = "norm";
		divNode.style.display = "none";
		b = true;
	}
	else
	{
		repswNode.className = "error";
		divNode.style.display = "block";
	}
	return b;
	
}

//校验mail
function checkMail(mailNode)
{
	var regex = /^\w+@\w+(\.\w+)+$/;
	return check(mailNode,regex,"maildiv");
}

//校验表单
function checkForm(formNode)
{
	with(formNode)
	{
		if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail))
			event.returnValue = true;
		else
			event.returnValue = false;
	}
}

</script>

</head>

<body>

<!--
1,定义页面
	通过表格来格式化表单。
    表格行都有一个自己的背景颜色。
    将单元格中的数据通过div进行封装。以便操作。

2，定义样式。
	表格的样式。
    div的样式。

3，动态效果。
	3.1在页面加载时，将所有的输入框默认的框线颜色以及定义获取焦点时的框线颜色。
    3.2进行内容校验。可以通过正则表达式完成，并通过框线的样式给用户提示。
    	通过对刚才用户名的校验的分析，发现代码重复度很高，为了提高复用性。
        将不同的内容错误参数传递，将相同的内容进行函数的封装。
	
-->


<form onsubmit="checkForm(this)">
	<table>
    	<tr>
        	<th>注册表单</th>
        </tr>
        	
        <tr>
        	<td>
            	<div>用户名</div>
                <div><input type="text" name="user" onblur="checkUser(this)" /></div>
                <div class="errorinfo" id="userdiv">用户名错误，请按要求输入</div>
                <div>用户名必须是3-5位，由字母(a-z)，数字(0-9)，下划线(_)组成</div>
            </td>
        </tr>
        
        <tr>
        	<td>
            	<div><span>密码</span> <span id="repswspan">确认密码</span></div>
          		<div>
                	<input type="password" name="psw" onblur="checkPsw(this)"  />
                    <input type="password" name="repsw" onblur="checkRepsw(this)"  />
                </div>
                <div class="errorinfo" id="pswdiv">密码格式错误，请按规范输入</div>
                <div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
                <div>密码必须是3-5位，由字母(a-z)，数字(0-9)，组成</div>
            </td>
        </tr>
        
        <tr>
        	<td>
            	<div>邮件地址</div>
                <div><input type="text" name="mail" onblur="checkMail(this)"  /></div>
                <div class="errorinfo" id="maildiv">邮箱地址错误，请按要求填写</div>
            </td>
        </tr>
        
        <tr>
        	<th>
            	<input type="submit" value="提交数据" />
            </th>
        </tr>
    </table>
</form>


</body>
</html>

 

分享到：
| 表单检验
评论
发表评论

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

相关推荐

    css3用户体验注册表单.zip

    在这个"css3用户体验注册表单.zip"压缩包中，我们很可能会找到一个利用CSS3来提升注册表单用户体验的示例。 首先，让我们深入了解一下CSS3在创建注册表单时如何改善用户体验。CSS3引入了许多新特性，如伪类选择器、...

    jQuery滑动式分步注册表单插件

    **jQuery滑动式分步注册表单插件详解** 在网页设计中，用户注册表单是必不可少的一部分。为了提供更好的用户体验，许多开发者选择使用分步式注册表单，这种形式可以将复杂的表单拆分成几个步骤，使得用户更容易理解...

    javascript实现注册表单

    在这个“javascript实现注册表单”的项目中，我们将会探讨如何使用JavaScript来创建一个功能丰富的京东风格的注册表单，涵盖表单验证、正则表达式匹配、表单状态追踪、随机验证码生成以及密码强度检测等多个关键环节...

    JS注册表单验证

    网上常见的用JS编写的注册表单验证的代码，非常实用哦

    jQuery用户注册表单验证代码

    在本文中，我们将深入探讨如何使用jQuery库进行用户注册表单的验证。jQuery是一个轻量级、高性能的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在用户注册过程中，表单验证是至关重要的...

    jQuery完整注册表单提交验证

    在本文中，我们将深入探讨如何使用jQuery实现一个完整的用户注册表单提交验证。这个验证系统包括了多个关键的验证环节，如用户名、密码强度、显示/隐藏密码、手机号码输入控制以及手机验证码、真实姓名和身份证号的...

    html网页用户注册表单验证校验JavaScript源码代码

    html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...

    jQuery带背景自动切换美观大方登录、注册表单web、html

    简介：jQuery带背景自动切换美观大方登录注册表单是一款带全屏背景自适应自动切换的登录注册表单特效，支持表单验证。 简介：jQuery带背景自动切换美观大方登录注册表单是一款带全屏背景自适应自动切换的登录注册...

    javascript做的注册表单

    在这个场景中，"javascript做的注册表单"是指使用JavaScript实现的用户注册功能，通常包括输入验证、数据处理和用户反馈等核心环节。JavaScript的优势在于它可以实时地在用户浏览器上运行，无需服务器参与，从而提供...

    网页用户注册表单校验JavaScript脚本代码源码下载

    简单的网页用户注册表单的校验，提供给大家学习，借鉴，完整代码已经打包，欢迎下载。截取一部分代码，如下： function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//...

    vue登录注册表单切换后台模板

    在"vue登录注册表单切换后台模板"中，我们主要会涉及到Vue的基础知识，组件化开发，以及如何通过Vue来实现登录注册表单的切换功能。 首先，Vue的核心特性之一是它的模板语法。在HTML文件中，我们可以看到`...

    用户注册表单验证(Ajax验证)

    用户注册表单验证是Web开发中的关键步骤，它确保用户输入的数据符合系统要求，从而提高数据质量并增强用户体验。在本场景中，我们讨论的是利用Ajax技术进行的异步验证，这种方式无需刷新整个页面，就能实时检查用户...

    JQuery实现注册表单实时验证

    **jQuery实现注册表单实时验证**是Web开发中常见的需求，尤其在用户界面设计中，为了提高用户体验，实时验证能够即时反馈用户输入的合法性，避免了用户提交后才出现错误提示的情况。本教程将深入讲解如何利用jQuery...

    jquery高级注册表单.zip

    《jQuery高级注册表单》是关于使用jQuery技术构建复杂、交互性强的注册表单的教程。这个主题主要涉及JavaScript库jQuery的高级应用，特别是与HTML表单和按钮相关的交互效果。在网页开发中，表单是收集用户信息的重要...

    jQuery手机移动端注册表单验证代码

    本篇文章将详细讲解如何使用jQuery在手机移动端实现注册表单的验证代码，确保用户输入的有效性和合规性。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在...

    前端学习 FreeCodeCamp html 注册表单

    对于注册表单，我们可能需要设置以下样式： 1. 表单的总体样式，如宽度、边距、背景色等： ```css form { width: 300px; margin: 0 auto; background-color: #f8f9fa; } ``` 2. 输入字段的样式，包括边框、...

    JavaScript验证注册表单（包含多种表单元素）

    本项目聚焦于使用JavaScript进行注册表单验证，涵盖了多种常见的表单元素，如文本框、单选按钮、复选框、下拉列表以及多行文本域。以下是对这些知识点的详细说明： 1. **文本框** (input type="text")：用于用户...

    HTML5 好看的注册表单

    注册表单在网页应用中十分重要，今天要向大家分享一款基于HMLT5的分步骤注册表单页面，表单外观比较华丽，点击下一步按钮即可跳转到下一步填写注册信息。该HTML5表单使用了很多CSS3属性，从而在表单切换时拥有弹性的...

    带验证的分步式注册表单

    在"带验证的分步式注册表单"中，验证功能是关键，它确保用户提供的数据准确无误，防止无效或不完整的注册信息。 1. **分步式设计**：分步式表单将长表单分解为几个小部分，每个部分对应一个步骤。这样的设计使用户...

    jquery表单验证实例网站会员注册表单验证提交form表单代码

    本实例将深入探讨如何利用jQuery实现网站会员注册表单的验证，并在用户提交form表单时进行有效控制。 首先，我们需要理解jQuery的核心概念。jQuery通过选择器（Selectors）选取HTML元素，然后使用方法（Methods）来...

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