jQuery实现用户注册的表单验证示例


Posted in Javascript onAugust 28, 2013
<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>
Javascript 相关文章推荐
jquery tools 系列 scrollable学习
Sep 06 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
node.js实现快速截图
Aug 27 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
探讨Vue.js的组件和模板
Oct 27 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 #Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 #Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 #Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 #Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 #Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 #Javascript
ExtJS DOM元素操作经验分享
Aug 28 #Javascript
You might like
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
解决python删除文件的权限错误问题
2018/04/24 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
房地产还款计划书
2014/01/10 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
评职称个人总结
2015/03/05 职场文书