<!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. 彻底理解JavaScript原型

    原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有"[[prototype]]"属性,函数对象有"prototype"属性,原型对 ...

  2. 鸿雁电器oa系统中决策支持模块效果

    公司简介鸿雁电器是国内著名的建筑电器产品的生产.经营企业,同时也是国家863计划CIMS(计算机集成制造系统)应用工程示范企业.浙江省高新技术企业.浙江省专利示范企业和杭州市信息化试点企业.企业系统泛 ...

  3. 《Python核心编程》部分代码习题实践(持续更新)

    第三章 3-10 交换异常处理方式 代码: #makeTextFile.py #!/usr/bin/env python 'makeTextFile.py' import os ls = os.lin ...

  4. 使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  5. ComboBox的联动

    窗体搭建: 实现功能: 加载年级下拉框 选中年级时加载出科目下拉框 加载年级下拉框: 第一步,在DAL层中写一个方法,检索所有的年级名称集合,返回的是泛型集合List<> public L ...

  6. 01 Hibernate错题分析

    解析: 此题目考查的是对Hibernate中交叉连接的理解.HQL支持SQL风格的交叉连接查询,交叉连接适用于两个类之间没有定义任何关联时.在where字句中,通过属性作为筛选条件,如统计报表数据.使 ...

  7. Unity自动构建

    Jenkins/Hudson Jenkins的前身是Hudson(Sun开发),2010年从Hudson分支出来.由于Sun被Oracle收购,Oracle声称拥有Hudson的商标所有权,Hudso ...

  8. [No00001A]天天换图，百词斩到底在折腾啥

  9. class 函数

    cocos2d-x 3.3 lua 版本的class函数用法: local FightScene = class("FightScene", function() return c ...

  10. Java命令行的执行参数

    Java 程序命令行参数说明 启动Java程序的方式有两种: # starts a Java virtual machine, loads the specified class, and invok ...