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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
webpack打包js的方法
Mar 12 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
escape unescape的php下的实现方法
2007/04/27 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python中正则表达式详解
2017/05/17 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
python批量修改交换机密码的示例
2020/09/22 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
一套C++笔试题面试题
2012/06/06 面试题
职称自我鉴定
2013/10/15 职场文书
应届大专生求职信
2014/06/26 职场文书
杜甫草堂导游词
2015/02/03 职场文书
质量保证书怎么写
2015/02/27 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang