如何利用jQuery进行简单表单验证
<!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进行简单表单验证的更多相关文章
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- 关于ajax用户名验证和jquery实现简单表单验证
首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- 自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- 打开eclipse报错：发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。
[错误] 打开eclipse报错:发现了以元素 ‘d:skin’ 开头的无效内容.此处不应含有子元素. [具体报错信息] Error parsing D:\Android-sdks\system-im ...
- Valgrind使用[转]
简介 调试程序有很多方法,例如向屏幕上打印消息,使用调试器,或者只需仔细考虑程序如何运行,并对问题进行有根有据的猜测. 在修复 bug 之前,首先要确定在源程序中的位置.例如,当一个程序产生崩溃或生成 ...
- easyui datagrid 添删改（纪录）
var groups;//用户组为另一个表,所以需先加载,用于编辑时下拉框 var editindex = undefined; var action; $(function () { $.ajax( ...
- linux框架之ibus
框架与具体输入法安装 ibus是一个框架,安装好ibus框架后,只需要安装ibus平台下具体的输入法即可,海风或极点五笔,然后注销当前账户,重新登录,便可添加新安装的输入法 [root@localho ...
- nginx windows 版 创建windows 服务
使用的工具 Windows Service Wrapper 使用的指令 nginx -s top Windows Service Wrapper 工具的使用: 1. 定义xml 文件: 说明如下: ...
- java 获取实体类对象属性值的方法
在java中我们要获得实体类对象的属性,一般情况是将实体类中的属性私有化,然后再对外提供get()与set()方法,然后再获取实体类对象的属性的时候先把对象new出来,再用变量名.get()的方法得到 ...
- LinearLayout和RelativeLayout 区别
LinearLayout和RelativeLayout转自:http://blog.csdn.net/w176236767/article/details/6605848共有属性:java代码中通过b ...
- bootstrap中datetimepicker只选择月份显示1899问题
直接修改bootstrap-datetimepicker.js中 update: function () { var date, fromArgs = false; if (arguments &am ...
- NoSQL 35 个非主流数据库
几乎每个Web开发人员都有自己喜欢的数据库,或自己最熟悉的数据库,但最常见的无外乎以下几种: MySQL PostgreSQL MSSQL SQLite MS Access 或是更简单的XML,文本文 ...
- lwip：网络数据包读取和解析过程
1. 程序的某处(poll or interrupt)在有数据可读时调用ethernetif_input,该函数依次调用以下函数: 1.1 low_level_input(),将网络数据读入内存: 1 ...