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的validate插件做客户端验证非常方便，下面做一个使用validate插件验证用户注册信息的例子。 本实例使用的是1.5版本。 示例是在SSH下做的，代码如下： registe.jsp <%@ page language=java ...
适合于网站注册的jQuery用户注册条款插件下载(带特效) 24.提升用户体验jquery Ajax表单输入检测验证示例代码 25.推荐jQuery美化Select下拉单选框模拟插件V1.3.6版本下载 26.推荐jQuery美化select下拉框样式...
内容索引:脚本资源,jQuery,表单验证,jQuery插件 这是一款jQuery 表单验证插件，不过它自带了好多种不同用途的表单验证示例，主要有用户名登录、用户注册、Email确认、自定义信息提示，单癣复选框判断、下拉列表选值...
下面提供一样注册页面验证示例： Html的form表单： [code=HTML] * 用 户 名：请输入您的用户名" size="22" name="username"/></td><div id="usernameTip"> * 密 码：...
多表布局示例 100% Html 响应页面 带分页和排序的数据表 不同类型的表单布局 验证表格 范围滑块 表单向导 发票页面 用户资料页面 不同类型的通知和甜蜜警报 登录/注册页面 动画模型 兼容小、中、大屏幕 动态和静态小...
Platters应用程序是我完整的专辑集，它转换为具有可选用户注册，登录和评论组件的数据库支持的Web应用程序。 Platters主要是带有JavaScript（Turbolinks，jQuery，不引人注目的jQuery和CofeeScript）的服务器端应用...
为用户信息表单增加动态行为154 显示验证错误155 让保存按钮无效156 使原生浏览器校验无效157 56在其他表单中嵌套表单157 将子表单作为可重用组件157 57重复子表单158 验证重复输入159 58处理传统的HTML表单...
06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery模态对话框与clone的...
第05课 JQuery AJAX 注册验证+二级菜单（JSON） 第06课 mybatis 框架搭建 第07课 mybatis 增删改查 第08课 mybatis 动态sql 第09课 bootstrap的搭建+栅格系统+table 第10课 bootstrap 表单 （二）会议管理系统之...
-MenuButton, LinkButton, Button, LinkButtonField增加ValidateTarget用来控制表单验证失败时提示对话框的显示位置。 +2010-01-06 v2.1.9 -集成Extjs最新版本v3.1.0。 -修正灰色皮肤的CSS问题。 -修正Grid...
-MenuButton, LinkButton, Button, LinkButtonField增加ValidateTarget用来控制表单验证失败时提示对话框的显示位置。 +2010-01-06 v2.1.9 -集成Extjs最新版本v3.1.0。 -修正灰色皮肤的CSS问题。 -修正Grid...
当用户发送第一次请求的时候，验证用户登录，创建一个该qq号和服务器端保持通讯连接得线程，启动该通讯线程，通讯完毕，关闭Scoket。 QQ客户端登录界面，中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...
当用户发送第一次请求的时候，验证用户登录，创建一个该qq号和服务器端保持通讯连接得线程，启动该通讯线程，通讯完毕，关闭Scoket。 QQ客户端登录界面，中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...
{12.10}示例}{162}{section.12.10} {12.10.1}exists}{165}{subsection.12.10.1} {12.11}集合操作}{165}{section.12.11} {12.11.1}union}{166}{subsection.12.11.1} {12.11.2}intersect与minus}{166}{subsection...