<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. Winform常用开发模式第一篇

    Winform常用开发模式第一篇 上一篇博客最后我提到“异步编程模型”(APM),之后本来打算整理一下这方面的材料然后总结一下写篇文章与诸位分享,后来在整理的过程中不断的延伸不断地扩展,发现完全偏离了 ...

  2. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  3. C语言与汇编“硬在哪里”——什么是面向硬件?

    Jack:为什么说C/C++语言是偏向硬件的语言呢? 我:这是把C与java等无指针/引用类编程语言相比较而得出的结论.因为java在j2ee的框架下,写的代码仅仅是逻辑,本质上和写shell脚本没啥 ...

  4. toFixed()要注意的

    toFixed()是Number类型的一种方法,该方法是保留四舍五入取指定位数的小数点,但最终返回值类型是字符串.所以,刚开始用该方法的人要注意不要在计算时使用到该方法.

  5. VS2013提示error C4996: 'strcat': This function or variable may be unsafe. Consider using strcat_s instead.

    在project属性内加上最后一句_CRT_SECURE_NO_WARNINGS即可

  6. InvocationHandler中invoke()方法的调用问题

    转InvocationHandler中invoke()方法的调用问题 Java中动态代理的实现,关键就是这两个东西:Proxy.InvocationHandler,下面从InvocationHandl ...

  7. Java8:使用Lambda表达式增强版Comparator排序

    学习路上的自我记录-------路好长,就问你慌不慌,大声港,不慌.----jstarseven. 实体类: package com.server.model; /** * Created by js ...

  8. eclipse中svn插件的安装和tortoiseSVN的安装

    在项目的开发中一般都需要用到版本控制,其中用的比较多的就是svn(subVersion),svn的使用既可以以插件的形式,也可以以客户端的形式使用.今天就介绍一下eclipse中svn插件的2种安装方 ...

  9. 办理多伦多大学(本科)学历认证『微信171922772』Toronto学位证成绩单使馆认证University of Toronto

    办理多伦多大学(本科)学历认证『微信171922772』Toronto学位证成绩单使馆认证University of Toronto Q.微信:171922772办理教育部国外学历学位认证海外大学毕业 ...

  10. 关于intelliJ idea创建servlet提示cannot resolve symbol‘servlet’的问题

    在刚刚折腾idea的时候会出现一系列的问题,就比如创建Servlet的时候,编辑器提示cannot resolve symbol'servlet'.出现这样的问题是因为在第一次用idea的时候还没有配 ...