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中Get和Set访问器的实现代码
Sep 19 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
用javascript操作xml
2006/11/04 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python3+Appium安装使用教程
2019/07/05 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
自荐书格式
2013/12/01 职场文书
统计岗位职责
2014/02/21 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
财务情况说明书范文
2014/05/06 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书