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 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 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生成不重复标识符的方法
2014/11/21 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
详解Python用户登录接口的方法
2019/04/17 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
python em算法的实现
2020/10/03 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
大学生求职推荐信
2013/11/27 职场文书
节约用水标语
2014/06/11 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
写给同事的离职感言
2015/08/04 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js