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 相关文章推荐
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
JavaScript分页组件使用方法详解
Jul 26 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 json 格式控制
2015/12/24 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
JavaScript触发器详解
2007/03/10 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
【python】matplotlib动态显示详解
2019/04/11 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
Python urllib2运行过程原理解析
2020/06/04 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
GWebs公司笔试题
2012/05/04 面试题
《童年的发现》教学反思
2014/02/14 职场文书
社区党员干部承诺书
2015/05/04 职场文书
《社戏》教学反思
2016/02/22 职场文书