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> / ...
随机推荐
- Android 高级UI设计笔记22：Android 指示引导页（带圆点）
1. 引导页: 我们在安装某个软件首次运行时,大部分都会有一个引导页的提示,介绍软件新功能的加入或者使用说明等,支持滑动且下面会有几个圆点,显示共有多少页和当前图片的位置,类似如下效果: 2. 引导页 ...
- 【开源项目11】组件间通信利器EventBus
概述及基本概念 **EventBus**是一个Android端优化的publish/subscribe消息总线,简化了应用程序内各组件间.组件与后台线程间 的通信.比如请求网络,等网络返回时通过Han ...
- 【Android Api 翻译3】android api 完整翻译之Application Fundamentals （学习android必须知道的）
Android应用程序是用Java编程语言编写的.Android SDK工具把应用程序的代码.数据和资源文件一起编译到一个Android程序包中(这个程序包是以.apk为后缀的归档文件),一个Andr ...
- Oracle基础 （十二）数学函数
数学函数: ABS(n):求绝对值 ),) FROM DUAL; --获取15的绝对值 结果:, BITAND(X,Y):返回X,Y进行位与(AND)的运算结果 ,), BITAND(,), BITA ...
- oracle lsnrctl
Oracle 11G在windows 7系统上不需要设置系统环境变量. 在命令行环境中运行命令: echo %ORACLE_SID% 可以看到此变量并不存在.也可以到注册表验证: HKEY_CURRE ...
- 剑指Offer09 数值的整数次方
/************************************************************************* > File Name: 09_Power. ...
- hdu 4411 最小费用流
思路:主要就是要把一个每个城市拆为两个点,建一条容量为1,费用为-inf的边,保证每个城市都会被遍历. /*最小费用最大流*/ #include<iostream> #include< ...
- macOS10.12允许所有来源设置
如何调出允许所有来源呢? 很简单一行命令搞定 调出允许所有来源 1.打开终端执行命令 sudo spctl --master-disable 2.你在打开偏好设置--> 安全与隐私 好了赶快 ...
- html背景自动移动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- backbone.Collection源码笔记
Backbone.Collection backbone的Collection(集合),用来存储多个model,并且可以多这些model进行数组一样的操作,比如添加,修改,删除,排序,插入,根据索引取 ...