//运用jQuery写的验证表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.3.1.js"></script>
<script src="js/lib/jquery.validate.js"></script>
<script src="js/lib/jquery.validate.messages_cn.js"></script>
<style>
body {
font: 12px/19px Arial, Helvetica, sans-serif;
color: #666;
} form div {
margin: 5px 0;
} .int label {
float: left;
width: 100px;
text-align: right;
} .int input {
padding: 1px 1px;
border: 1px solid #ccc;
height: 16px;
} .sub {
padding-left: 100px;
} .sub input {
margin-right: 10px;
} .formtips {
width: 200px;
margin: 2px;
padding: 2px;
} .onError {
background: #FFE0E9 url(images/reg3.gif) no-repeat 0 center;
padding-left: 25px;
} .onSuccess {
background: #E9FBEB url(images/reg4.gif) no-repeat 0 center;
padding-left: 25px;
} .high {
color: red;
}
</style>
<script>
$(function () {
$("form :input.required").each(function () {
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
})
$("form :input").blur(function () {
var $parent = $(this).parent();
$(".formtips").remove();
if ($(this).is("#username")) {
if (this.value == '' || this.value.length < 6) {
var errmsg = '请输入正确的格式.';
$parent.append('<span class="formtips onError">' + errmsg + '</span>')
} else {
var sucssemsg = '格式输入正确';
$parent.append('<span class="formtips onSuccess">' + sucssemsg + '</span>')
}
}
if ($(this).is("#email")) {
//邮箱格式正则表达式的用法
if (this.value == '' || ( this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )) {
var errmsg = '请输入正确的格式.';
$parent.append('<span class="formtips onError">' + errmsg + '</span>')
} else {
var sucssemsg = '格式输入正确';
$parent.append('<span class="formtips onSuccess">' + sucssemsg + '</span>')
}
}
})
$("#send").click(function () {
var onerr = $(this).parent().siblings().children().hasClass("onError");//出错就会添加class为onerror的元素
if(onerr) {
return false;
} else {
alert("你已经注册成功了");
}
}
)
$("#reset").click(function () {
$(".formtips").remove();
})
})
</script>
</head>
<body> <form method="post" action="">
<div class="int">
<label for="username">用户名:</label>
<input type="text" id="username" class="required"/>
</div>
<div class="int">
<label for="email">邮箱:</label>
<input type="text" id="email" class="required"/>
</div>
<div class="int">
<label for="personinfo">个人资料:</label>
<input type="text" id="personinfo"/>
</div>
<div class="sub">
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</div>
</form> </body>
</html>

运用jQuery写的验证表单的更多相关文章

  1. jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  2. jquery通过class验证表单不能为空

    在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护. 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证.(ID ...

  3. jquery.validate 使用--验证表单隐藏域

    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...

  4. JavaScript/Jquery:Validform 验证表单的相关属性解释

    当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...

  5. JQuery如何在验证表单失败的情况下阻止表单提交

    自定义验证时,使用了return false和event.preventDefault(),但是验证失败之后表单还是提交了 这个问题我也碰到了,尝试了多次也没有用,在调试的时候也发现确实return了 ...

  6. JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

    JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  8. MVC4中 jquery validate 不用submit方式验证表单或单个元素

    正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...

  9. MVC中 jquery validate 不用submit方式验证表单或单个元素

    <script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...

随机推荐

  1. (转)css内边距与外边距的区别,精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

  2. 【ztree】ztree例子

    <script language="javascript" type="text/javascript" src="js/jquery.js&q ...

  3. 【PHP】打印输出var_dump+echo+print_r

    var_dump 判断一个变量的类型与长度如:<?$a = 1;$b = 't';echo var_dump($ta,$tb); // 结果为 int(123) string(3) " ...

  4. tcp netstat用法 TIME_WAIT状态解析 MTU以及MSS

    带着问题写博客 问题1:使用netstat查看有源TCP连接的状态时,经常会看到established状态,那么还有哪些状态,这些状态是如何变化的呢? 问题2:TIME_WAIT状态存在的必要? 问题 ...

  5. 实例甜点 Unreal Engine 4迷你教程(4)之用C++实现添加子Widget到VerticalBox中以及ClearChildren

    前置教程: 1. 实例甜点前面的三篇教程: 2. 最好看看笔者前面的一篇关于博文(后记:本来笔者想用C++做DragAndDrop的功能,但是失败了,下面是蓝图实现的方法): http://www.c ...

  6. Eclipse错误:Implicit super constructor ClassName is undefined for default constructor. Must define an explicit constructor

    public class Test01 { private String name; private int age; public Test01(String name){ this.name = ...

  7. Unity 继承MonoBehaviour脚本 执行顺序 详解

    先看结果 Awake ->OnEnable-> Start ->-> FixedUpdate-> Update  -> LateUpdate ->OnGUI ...

  8. nstallation error: INSTALL_PARSE_FAILED_MANIFEST_MALFORMED报这个错的原因???

    [2015-06-05 20:37:51 - 05ListView列表控件] ------------------------------ [2015-06-05 20:37:51 - 05ListV ...

  9. 从用eclipse还是idea所想到的

    最近一直在用idea做开发,刚开始用起来还是不熟,毕竟上次用idea还是研三在某知名互联网实习的时候,在学校和上家公司都用的是eclipse,然后就想,为什么有的公司用eclipse,有的公司用ide ...

  10. MyEclipse去除网上复制下来的代码带有的行号

    正则表达式去除代码行号 作为开发人员,我们经常从网上复制一些代码,有些时候复制的代码前面是带有行号,如: MyEclipse本身自带有查找替换功能,并且支持正则表达式替换,使用正则替换就可以很容易去除 ...