<style>
.red{border: 1px solid red;}
.wrong-tip{color: red;}
</style>

  

<form action="http://fanyi.baidu.com/">
昵称:<input type="text" class="name"> 密码:<input type="password" class="password"><br/><br/>
<div class="wrong-tip"></div>
<input type="submit" value="提交" class="submit" />
</form>

  

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function() {
var ok1 = false;
var ok2 = false; function check1() {
if($(".name").val().length >= 3 && $(".name").val().length <= 12 && $(".name").val() != '') {
$(".name").removeClass("red");
$(".wrong-tip").html("");
ok1 = true;
} else {
$(".name").addClass("red");
$(".wrong-tip").html("用户名应该为3-20位之间!");
ok1 = false;
}
} function check2() {
if($(".password").val().length >= 6 && $(".password").val().length <= 20 && $(".password").val() != '') {
$(".password").removeClass("red");
$(".wrong-tip").html("");
ok2 = true;
} else {
$(".password").addClass("red");
$(".wrong-tip").html("密码应该为6-20位之间!");
ok2 = false;
}
} $(".name").blur(function() {
check1();
})
$(".password").blur(function() {
check2();
}) $(".submit").click(function() {
check1();
check2();
if(ok1 && ok2) {
return true;
//如果用的是模拟按钮,则用这个。 $('form').submit();
} else {
return false;
}
})
})
</script>

 以前觉得表单校验好难,今天终于弄明白了。

关于jQuery表单校验的更多相关文章

  1. day32(表单校验js和jquery表单校验)

    校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...

  2. JQuery -- Validate, Jquery 表单校验

    1. Jquery 表单验证需要插件 jQuery validation 1.7  ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassistance ...

  3. 关于jQuery表单校验的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. jQuery表单校验

    主要特性: 表单提交前对所有数据进行校验,不符合不让提交(validate) 如果表单校验不通过,自动focus到第一个错误的域 自动在控件后面显示错误提示内容(error message) 支持根据 ...

  5. JQuery 表单校验插件 validate 使用纪录

    JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...

  6. jquery 表单校验

    <link type="text/css" href="<%=basepath%>css/form/validate.css" rel=&qu ...

  7. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  8. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  9. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

随机推荐

  1. TOGAF架构内容框架之内容元模型(上)

    TOGAF架构内容框架之内容元模型(上) 2. 内容元模型(Content Metamodel) 在TOGAF的眼中,企业架构是以一系列架构构建块为基础的,并将目录.矩阵和图形作为其具体展现方式.如果 ...

  2. 揭开Html 标签的面纱,忘不了的html .

     Html :(Hypertext MarkupLanguage),是用于描述网页文档的一种标记语言,是一种标准,它通过标记符号来标记要显示的网页中的各个部分.其本身是一种文本文件,通过在文本文件中添 ...

  3. 项目在JDK1.8环境下的一个Bug

    今天发现一个已有的项目在JDK1.8环境下运行时,会报错: The type java.util.Map$Entry cannot be resolved. It is indirectly refr ...

  4. C#微信公众号开发--网页授权(oauth2.0)获取用户基本信息二

    前言 这一篇实现snsapi_userinfo,写这篇时其实我是有疑惑的,因为我并没有调试成功,但是我反复检查程序和思路是没有问题的,因为我使用的测试公众号,群里一个伙计说他之前调试时用的也是测试公众 ...

  5. InnoDB的约束机制

    数据完整性 关系型数据库系统和文件系统的一个不同点是,关系数据库本身能保证存储数据的完整性,不需要应用程序的控制,而文件系统一般需要在程序端进行控制.几乎所有的关系型数据库都提供了约束(constra ...

  6. POJ 半平面交 模板题 三枚

    给出三个半平面交的裸题. 不会的上百度上谷(gu)歌(gou)一下. 毕竟学长的语文是体育老师教的.(卡格玩笑,别当真.) 这种东西明白就好,代码可以当模板. //poj1474 Video Surv ...

  7. js的eval函数解析后台返回的json数据时为什加上圆括号eval("("+data+")"),而HTML页面定义的数据不用

    一,情况如下,这是成功代码: $(function () { $.ajax({ url: "Demo.aspx", type: "post", data: { ...

  8. 关于对HandlerThread的了解

    在Android中经常需要创建一个循环线程,有耗时操作时候,放到里面去操作,如果没有耗时操作,就让该线程处于等待,但是不要杀死它, 最好不要一旦有耗时任务,就立刻创建一个新线程,因为会有性能问题. H ...

  9. openui5的资料比较少

    openui5的资料比较少,稳定优秀的开源框架,国内了解的人了了,都在追AngularJS.ExtJS.React. React比较新,非死不可出品而且裹挟Native的噱头.Mobile Nativ ...

  10. CentOS7安装和配置Nginx(https)

    安装Nginx下载安装包# wget http://nginx.org/download/nginx-1.11.7.tar.gz# tar -zxvf nginx-1.11.7.tar.gz# cd ...