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下关于$.Ready()的分析
Dec 13 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
通过实践编写优雅的JavaScript代码
May 30 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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php实现的短网址算法分享
2014/06/20 PHP
php输出xml属性的方法
2015/03/19 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
python视频按帧截取图片工具
2019/07/23 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
二年级语文教学反思
2014/02/02 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
护士实习自荐信
2015/03/06 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript