jQuery实现用户注册的表单验证示例
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(":input.required").each(function(){
var $required = $("<strong>*</strong>");
$(this).parent().append($required);
});
$(":input.required").blur(function(){
//判断一下鼠标离开谁了
if($(this).is("#username")){
$(".formtip").remove();
//按照用户名的规则去验证
if(this.value==""||this.value.length<6){
var errMsg = "<span class='formtip'>用户名至少是6个字母</span>";
$(this).parent().append(errMsg);
}else{
var msg = "<span class='formtip'>用户名可以使用</span>";
$(this).parent().append(msg);
}
}
//判断一下如果是email的话,应该按照email的规则去验证
if($(this).is("#email")){
$(".emailtip").remove();
//按照email的规则去验证
var reg = /^\w{1,}@\w+\.\w+$/;
var $email = $("#email").val();
if(!reg.test($email)){
var errMsg = "<span class='emailtip'>邮箱不合法</span>";
$(this).parent().append(errMsg);
}else{
var Msg = "<span class='emailtip'>邮箱可以使用</span>";
$(this).parent().append(Msg);
}
}
});
})
</script>
</head>
<body>
<form action="#" method="post">
<div class="int">
用户名:<input type="text" name="username" id="username" class="required"/>
</div>
<div class="int">
邮箱:<input type="text" id="email" class="required"/>
</div>
<div class="int">
个人资料:<input type="text" id="personInfo" class="required"/>
</div>
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</form>
</body>
</html>
分享到：
相关推荐
总之，jQuery提供了强大的工具来简化表单验证的实现，通过结合DOM操作、事件处理和正则表达式，我们可以创建出功能完善、用户体验良好的用户注册表单。这个小项目可以帮助你深入理解这些概念，并实践在实际项目中。
本教程将详细探讨如何使用jQuery来实现这一功能，结合HTML模板，构建一个完整的用户注册表单验证示例。 首先，我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画...
这个例子只是一个基础的用户注册表单验证实现，实际应用中可能需要更复杂的验证规则，例如用户名的唯一性、密码强度检测、邮箱可用性验证等。这些可以通过添加额外的验证条件或利用Ajax异步查询来实现。同时，为了...
总的来说，这个压缩包提供了一个完整的jQuery手机移动端注册表单验证示例，涵盖了从HTML布局、jQuery逻辑处理到CSS样式设计的全过程。无论是初学者还是有经验的开发者，都能从中学习到如何利用jQuery创建一个功能...
总结来说，通过结合jQuery的事件处理、JavaScript的正则表达式以及合理的前端设计，我们可以构建出一个既美观又实用的实时注册表单验证系统。在实际开发中，还应考虑如何处理异步验证（如检查用户名是否已存在）以及...
本案例中，“jQuery用户注册表单验证页面代码.zip”是一个包含实现这一功能的资源包，主要用于创建一个用户注册页面，特别是针对手机用户的注册，并且涉及到了密码设置的验证环节。 首先，`index.html`是网页的主...
本篇将深入探讨如何利用JQuery实现表单验证，特别是在注册验证场景中的应用。 首先，了解JQuery的核心概念是必要的。JQuery是一个轻量级、高性能的JavaScript库，它通过简洁的API简化了DOM操作、事件处理、动画以及...
总结来说，"jQuery用户注册表单验证代码"提供了一个基于jQuery的简单但功能完备的表单验证示例，涵盖了基本的验证规则和反馈机制，适用于快速构建具有验证功能的注册表单。开发者可以根据自己的需求对这个代码进行...
在"jquery实现网站注册页面验证信息"的压缩包文件中，可能包含了实现上述功能的HTML、CSS和JavaScript代码示例。这些文件可以作为学习和参考的资源，帮助开发者理解如何在实际项目中整合这些验证功能。 总结，使用...
在本项目中，"jQuery实现带Tooltip表单验证的注册表单.zip" 是一个包含使用jQuery库来构建具有工具提示（Tooltip）功能的表单验证的示例。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、...
总之，jQuery在网站注册表单验证中的应用是前端开发的重要技能之一，它使得验证过程更加高效、直观，提高了用户的注册体验。通过对"jQuery带步骤网站注册表单填写验证代码"的学习和实践，你可以更好地掌握这一技巧，...
总的来说，jQuery在用户注册表单验证中的应用涉及到了前端开发的多个关键领域，包括事件处理、DOM操作、数据验证、动画效果和Ajax通信。通过这个实例，开发者不仅可以学习到如何创建一个功能完善的验证系统，还可以...
本示例聚焦于使用jQuery库进行表单验证，特别是在百度注册页面的应用。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务，使得开发者能够更高效地编写JavaScript代码。 ...
本示例提供了一个实用的jQuery实现的用户注册表单验证代码，它能够检查输入是否为空以及输入格式是否正确。在进行详细说明之前，我们先了解一下jQuery库和它的基本用法。 jQuery是一个快速、简洁的JavaScript库，...
针对“jQuery实现digg风格的表单验证和验证提示的用户注册表单.zip”这个主题，我们将深入探讨如何利用jQuery来创建一个具有Digg风格的高效、用户体验友好的用户注册表单。 Digg风格的表单验证通常指的是即时反馈式...
在这个“jQuery实用的注册表单验证代码”压缩包中，包含了一套使用jQuery库实现的高效、易用的表单验证解决方案。这个方案结合了CSS、JavaScript和HTML5的特性，旨在简化复杂的验证逻辑，让开发者能够快速地为注册...
在提供的"SignUpForm Demo"中，可能包含了一个简单的注册表单验证示例。此示例可能展示了如何应用上述步骤，包括定义验证规则、错误消息和处理验证结果。通过查看源代码和运行示例，你可以更深入地了解如何在实际...