<!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. SmartPointer Smar指针

    #include<iostream> using namespace std; // private class for use by HasPtr only class U_Ptr { ...

  2. service postgresql initdb [FAILED]

    一.场景 安装postgresql时可能因为配置有问题[后来定位问题是我把pg_hba.conf中local一栏的ident修改为peer就会出错]导致服务起不来,报错如下: [root@localh ...

  3. Java虚拟机详解----JVM常见问题总结

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  4. Spring AOP 5种通知与java动态代理

    接口,要求为每个方法前后添加日志  @Component("arithmeticCalculator") public class ArithmeticCalculatorImpl ...

  5. 第9章 用内核对象进行线程同步（4）_死锁(DeadLock）及其他

    9.7 线程同步对象速查表 对象 何时处于未触发状态 何时处于触发状态 成功等待的副作用 进程 进程仍在运行的时候 进程终止的时(ExitProcess.TerminateProcess) 没有 线程 ...

  6. Maven学习（九）插件介绍

    我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven-compiler-plugin完成的.进一步说,每个任务对应了 ...

  7. 如何配置QuickFIX/N

    Acceptor或者Initiator能够为您维护尽可能多的FIX会话,因而FIX会话标识的唯一性非常重要.在QuickFIX/N中,一个FIX会话的唯一标识是由:BeginString(FIX版本号 ...

  8. CGGeometry Reference (一)

    知识点 frame 与bounds 的区别 1.frame 是这个视图的大小在父视图的位置 . 如x 20 y 20  width 200 height 300 2.bounds 是这个视图的大小在自 ...

  9. CSS3硬件加速需要注意的事项

    webkit浏览器会把所有需要动画的元素放到复合层中渲染,另外以下两种情况也会使不需要动画的元素也放到复合层中渲染,这样会导致元素动画不流畅(原则是需要的动画才让它在复合层中渲染) 1,元素有一个包含 ...

  10. 58种jQuery模拟CSS3过渡页面切换特效

    演示网址 http://www.htmleaf.com/Demo/201503251573.html 点击下载