<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<style type="text/css">
.err{
color:#ff0000;
font-weight: bold;
display: none;
}
</style>
<body>
<form action="" method="post">
<p>
<input type="text" name="zhanghao" id="" placeholder="请输入账号" class="atch"/>
<span class="err">账号不低于5位</span>
</p>
<p>
<input type="password" name="mima" id="" placeholder="请输入密码" class="atch"/>
<span class="err">密码有误</span>
</p>
<p>
<input type="password" name="twomima" id="" placeholder="请再次输入密码" class="atch"/>
<span class="err">密码不一致</span>
</p>
<p>
<input type="text" name="youxiang" id="" placeholder="请输入邮箱" class="atch"/>
<span class="err">邮箱格式不正确</span>
</p>
<p>
<input type="text" name="haoma" id="" placeholder="请输入手机号码" maxlength="11" class="atch"/>
<span class="err">手机号码不正确</span>
</p>
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
$(function(){
$("input[name=zhanghao]").blur(function(){
val=this.value;
if(val.length<5){
$(this).data({"s":0});
$(this).next().show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
});
$("input[name=mima]").blur(function(){
val=this.value;
if(val.length<8){
$(this).data({"s":0});
$(this).next().show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
});
$("input[name=twomima]").blur(function(){
var mima=$(this).val();
if($(this).val()!=mima){
$(this).data({"s":0});
$(this).next().show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
});
$("input[name=youxiang]").blur(function(){
var email=$(this).val();
if(!email.match(/^\w+@\w+\.\w+$/i)){
$(this).data({"s":0});
$(this).next().show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
});
$("input[name=haoma]").blur(function(){
var iphone=$(this).val();
if(!iphone.match(/^139\d{8}$/)){
$(this).data({"s":0});
$(this).next().show();
}else{
$(this).data({"s":1});
$(this).next().hide();
}
});
});

$("form").submit(function(){
$(".atch").blur();
tot=0;
$(".atch").each(function(){
tot+=$(this).data("s");
})
if(tot!=5){
return false;
}else{

}
})
</script>
</body>
</html>

非常实用的jquery版表单验证的更多相关文章

  1. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  2. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  3. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  4. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  5. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  6. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  7. jQuery的表单验证

    jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. Jquery 实现表单验证，所有验证通过方可提交

    1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  9. 用 jQuery 实现表单验证（摘抄）——选自《锋利的jQuery》（第2版）第5章的例题 5.1.5 表单验证

    5.1.5 表单验证 表单(form)作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信息等,因此它是网站管理者与浏览者之间沟通的桥梁.在表单中 ...

随机推荐

  1. Eclipse中启动tomcat报错:A child container failed during start

    我真的很崩溃,先是workspace崩了,费了好久重建的workspace,然后建立了一个小demo项目,tomcat中启动却报错,挑选其中比较重要的2条信息如下: A child container ...

  2. windows下 MySQL手动安装与卸载

    下载文件以后进行解压 ,指定文件的具体位置 1.安装 选择路径下的mysqld --intall 指定服务名称  --设置配置文件 例子: C:\Users\Administrator\Desktop ...

  3. AC日记——字符串判等 openjudge 1.7 17

    17:字符串判等 总时间限制:  1000ms 内存限制:   65536kB 描述 判断两个由大小写字母和空格组成的字符串在忽略大小写,且忽略空格后是否相等. 输入 两行,每行包含一个字符串. 输出 ...

  4. 菜鸟的IT生活4

    今天主要复习了以前的内容,输入输出,数据类型,运算符,顺序语句,分支语句等等,把几个不太连贯跟没上传过的传一下,以后加深下印象,加油!

  5. [No00002B]知乎精选：如果兔子都在拼命奔跑，乌龟该如何前进

    最近看到友人分享的一篇好文章,看了不下三遍,想开了很多的事情…… 在这个世界上永远存在一些比你更加牛的人,无论什么方面.如果把人生比作攀登,也许你穷其一生可以达到一定的高度,但对某些人来说珠峰都不成问 ...

  6. Samsung I9103刷cm-10.1的方法

    按照官方网站的说明一步一步的做下去的时候发现在执行heimdall.exe文件的时候出现“不是win32的应用程序”的错误提示,因此决定按照其它方法安装recovery,然后再刷入CM10.1. sa ...

  7. AFN 处理网络哪些事(轻松掌握AFN网络顶级框架)

    AFN 一.什么是AFN 全称是AFNetworking,是对NSURLConnection的一层封装 虽然运行效率没有ASI高,但是使用比ASI简单 在iOS开发中,使用比较广泛 AFN的githu ...

  8. js正则验证邮箱、手机号、年龄

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CoreAnimation笔记

    核心动画继承结构 CoreAnimation Core Animation是直接作用在CALayer上的(并非UIView上)非常强大的跨Mac OS X和iOS平台的动画处理API,Core Ani ...

  10. AI图片剪切

    来源:http://tieba.baidu.com/p/1203332701?pid=14163166977&cid=78618096662&from=prin#78618096662 ...