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 选中表格一列并对表格排序实现原理
Dec 15 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
九种原生js动画效果
Nov 11 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
新手简单了解vue
May 29 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
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横向重复区域显示二法
2008/09/25 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
经验几则 推荐
2006/09/05 Javascript
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
canvas绘制七巧板
2017/02/03 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python 实现矩阵按对角线打印
2019/11/29 Python
小学校本培训方案
2014/06/06 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
个性与发展自我评价
2015/03/06 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL