<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
body {
    font-size: 11px
}
#divLogin {
    margin: 15% 0 0 15%
}
#divLogin fieldset {
    width: 300px;
    padding: 0px;
    margin: 0px
}
#divLogin fieldset h3 {
    margin: 0px;
    padding: 5px;
    background-color: #eee
}
#divLogin fieldset .content {
    padding: 20px;
    line-height: 2.6em
}
#divLogin fieldset .content .btnCenter {
    text-align: center
}
.txt {
    border: #666 1px solid;
    padding: 2px;
    width: 180px;
    margin-right: 3px
}
.btn {
    border: #666 1px solid;
    padding: 2px;
    width: 60px;
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ECE9D8)
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $("#Button1").click(function() { //按钮点击事件
         var $name = $("#txtName"); //用户名
         var $pass = $("#txtPass"); //密码
         if ($name.val() == "")
        {
            alert("用户名不能为空!");
            $name.focus();
            return false;
         }
         else
        {
            alert("密码不能为空!");
            $pass.focus();
            return false;
         }
      })
   })
</script>
</head>
<body>
<div id="divLogin">
  <fieldset>
    <h3>用户登录</h3>
    <div class="content">
      <div>用户:
        <input id="txtName" type="text" class="txt" />
      </div>
      <div>密码:
        <input id="txtPass" type="password" class="txt"/>
      </div>
      <div class="btnCenter">
        <input id="Button1" type="button" value="登录" class="btn" />
        <input id="Reset1" type="reset" value="取消" class="btn" />
      </div>
    </div>
  </fieldset>
</div>
</body>

</html>

以上代码实现了基本的表单验证功能,

如何利用jQuery进行简单表单验证的更多相关文章

  1. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  2. 关于ajax用户名验证和jquery实现简单表单验证

    首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...

  3. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  4. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  5. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

  6. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  7. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  8. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  9. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. UMDH

    1. 什么是UMDH UMDH=User Mode dump heap.把进程的堆dump下来.包括堆栈信息.UMDH是WinDbg附带的一个工具. 2. 下载安装 WinDbg.完事后在WinDbg ...

  2. Code First 数据注释

    Code First 数据注释 Julie Lerman http://thedatafarm.com 通过实体框架 Code First,可以使用您自己的域类表示 EF 执行查询.更改跟踪和更新函数 ...

  3. setTimeout()和setInterval()方法的区别?

    因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执 ...

  4. SQL Server 系统表简介

    SQL Server 系统表简介 系统目录是由描述SQL Server 系统的数据库.基表.视图和索引等对象的结构的系统表组成.SQL Server 经常访问系统目录,检索系统正常运行所需的必要信息. ...

  5. shell之函数

    function 所有函数在使用前必须定义.这意味着必须将函数放在脚本开始部分,直至shell解释器首次发现它时,才可以使用.调用函数仅使用其函数名即可.可以将函数看作是脚本中的一段代码,但是有一个主 ...

  6. TKinter布局之grid 网格布局

    1.由于我们的程序大多数都是矩形,因此特别适合于网格 布局,也就是 grid 布局. 2.使用 grid 布局的时候,我们使用 grid 函数,在里面指 定两个参数,用 row 表示行,用 colum ...

  7. android数据存储之File

    android中使用File进行存储主要使用到OpenFileOutput和OpenFileInput两个方法,下面直接用一个例子来说明一下. (1)布局文件main.xml文件 <?xml v ...

  8. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. windows 2003 server 远程桌面禁用本地资源,磁盘驱动器,串行口,复制文件

    首先进入组策略编辑器(开始-运行-gpedit.msc) 不要让用户在远端桌面和本地直接拷贝文件在远端桌面上进入它的组策略编辑器在 计算机配置->管理模板->Windows组件->终 ...

  10. session_write_close()

    功能: 结束当前的session 操作 保存session 数据  说的很明白了, 当脚本请求没有调用session_write_close(); 时虽然 session  的数据是存储住了.但是 s ...