jQuery实现用户注册的表单验证
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script>
/**
* 用户注册的表单验证
* by www.jbxue.com**/
$(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>
jQuery实现用户注册的表单验证的更多相关文章
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- 一款基于jQuery的带Tooltip表单验证的注册表单
今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...
- jQuery之简单的表单验证
html部分: <body> <form method="post" action=""> <div class="in ...
- 用jquery实现简单的表单验证
HTML代码: 1 <form action="" method="post" id="form-data"> 2 <di ...
- JQuery在一个简单的表单验证的例子
html代码例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- jQuery Validatede 结合Ajax 表单验证提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery自己手写表单验证
<script type="text/javascript" src="../jquery-1.8.3.js"></script> / ...
随机推荐
- Oracle基础 exp/imp和expdp/impdp的区别：
一.exp/imp和expdp/impdp在功能上的区别: 1.把用户usera的对象导入到userb emp/imp用法: formuser=usera touser=userb; empdp/im ...
- 开启Microsoft SQL Management时，如果出现"未能加载包
Ms Sql server 2005在开启Microsoft SQL Management时,如果出现"未能加载包“Microsoft SQL Management Studio Packa ...
- Intent.ACTION_PICK
在常见的Activity Action Intent常量中,ACTION_PICK android.intent.action.PICK 是“选择数据”的意思,来简单的分享一下我知道的Intent. ...
- linux 用户打开进程数和文件数调整
1 查看nproc(max user processes)命令 [root@vm-cdh4 ~]# ulimit -u 14866 2 修改nproc 临时修改, 重登录或重启后失效: [root@v ...
- win7 开启休眠
使用cmd命令进行开启,首先点击开始菜单,在“搜索程序和文件”中输入“cmd”,然后点击回车键.如下: 2 弹出如下图的界面,在其中最后的地方输入“powercfg -hibernate on”,然后 ...
- 桌面虚拟化之部署DDC-5.6
1. 打开管理软件 2. 选择桌面部署 3. 如果没有数据库则使用默认的 4. 导入许可证文件(当然未申请可试用30天) 5. 主机类型选择无(这里未做服务器虚拟化) 6. 最后完成初步配置 配置计算 ...
- js 动态添加元素（div、li、img等）及设置属性
把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...
- iOS自定义NavigationBar
日常开发中少不了用到UINavigationController,但是很多情况都要自定义NavigationBar.依稀记得自己刚开始也踩了好多坑,凑今天有空,就把想到的写下来.有时间了,考虑再把自定 ...
- dreamweaver基础1
文本enter回车 (隔着一行)SHIFT+enter回车 (换行不分段)网页图片格式:最优化:在保证画质前提下尽可能是图片数据量小一些.(gif,数据量小,带有动画信息,实现透明背景,但只支持256 ...
- 点击文字label同时选中checkbox radio
在做网页的时候一般会有一个需求:点击一段文字信息的同时选中某个checkbox 旧处理方式是在这段文字上加上点击事件触发checkbox的选中事件 //jq中://选中 $("#ID&quo ...