jQuery实现用户注册的表单验证
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script>
/**
* 用户注册的表单验证
* by www.jbxue.com**/
$(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实现用户注册的表单验证的更多相关文章
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- 一款基于jQuery的带Tooltip表单验证的注册表单
今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...
- jQuery之简单的表单验证
html部分: <body> <form method="post" action=""> <div class="in ...
- 用jquery实现简单的表单验证
HTML代码: 1 <form action="" method="post" id="form-data"> 2 <di ...
- JQuery在一个简单的表单验证的例子
html代码例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- jQuery Validatede 结合Ajax 表单验证提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery自己手写表单验证
<script type="text/javascript" src="../jquery-1.8.3.js"></script> / ...
随机推荐
- oracle数据库常用SQL语句
1)删除表的一列 ALTER TABLE 表名 DROP COLUMN 列名; 2)增加表的一列 且默认值为0 alter table 表名 add 字段名 类型 default '0'; 3)修改表 ...
- nodejs 安装 postgresql module
# npm -gd install node-gyp # export PATH=$PATH:/usr/local/pgsql/bin # npm -gd install pg for test: # ...
- Hadoop学习笔记(3)——分布式环境搭建
Hadoop学习笔记(3) ——分布式环境搭建 前面,我们已经在单机上把Hadoop运行起来了,但我们知道Hadoop支持分布式的,而它的优点就是在分布上突出的,所以我们得搭个环境模拟一下. 在这里, ...
- Java学习笔记——JDK1.7的新特性。
1,switch中可以使用字串 Java代码: String s = "test"; switch (s) { case "test" : System.out ...
- [UML]UML之开篇
前言 大学时,学习软件工程时,学到了UML,由于当时接触项目太少,认识不清,再加上毕业后一直忙于coding,很少有时间去真正的认识和学习UML. 现在感觉有必要去回头看看这些东西啦. 什么是UML ...
- IQueryable与IEnumberable的区别
IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口 ...
- CF Destroying Roads (最短路)
Destroying Roads time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- Differential Geometry之第三章曲面的局部理论
第三章.曲面的局部理论 1.曲面的概念 1.1.曲面的概念 1.2.切平面与法向 2.曲面的第一基本形式 3.曲面的第二基本形式 正定矩阵:一个n阶的实对称矩阵M是正定的的条件是当且仅当对于所有的非零 ...
- 导出用户列表到Excel的几种方法
最近客户在咨询着怎么把SharePoint上面的用户列表给到出Excel,查看了一下,SharePoint并没有提供直接可用的导出功能(虽然都是List,但就是不让你导出...) 网上搜索了一下,方法 ...
- 使用Jeditable插件时遇到的问题
Jeditable在渲染页面已有DIV=>form的时候 首先使用 $("div").html(); 去获取原DIV中的内容. 这样导致一个问题, 如果原div中带有html ...