`
跟随我的心
  • 浏览: 3156 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

jQuery验证表单属性是否为空

阅读更多
使用jQuery实现这个以前用js实现的功能,可以不用使用令人讨厌的alert警告框,而是在页面需要的地方给出错误提示信息。

注意:贴出来的代码只是帮助理解,完整的源代码已经打包上传了


1.登录页面




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="css/login.css"  />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/login.js"></script>
	<title>用户登录</title>
</head>

<body>
  <div id="sign_in">
    <form action="" method="post">
        <label for="username">用户名</label>
        <p class="errorinfo" id="info1">请输入用户名</p>
        <input type="text" id="username" name="username" tabindex="1"/>
        <label for="password">密码</label>
        <p class="errorinfo" id="info2">请输入密码</p>                
        <input type="password" id="password" name="password" tabindex="2" />     
        <button type="submit" id="submit" name="submit" tabindex="3">登录</button>
    </form>
  </div>
</body>
</html>



2.jQuery代码

/*jQuery验证表单属性是否为空*/
$(document).ready(function(){
	$("form").submit(function(){
		//获得表单值
		var username=$("#username").val();
		var password=$("#password").val();
		//如果表单为空,提示用户
		if(username==""){
			//显示错误提示信息
			$("#username").addClass("redborder");
			$("#info1").addClass("show");
			return false;
		}
		if(password==""){
			$("#password").addClass("redborder");
			$("#info2").addClass("show");
			return false;
		}
		return true;
	});
});


3.css相关代码

.errorinfo{
        visibility:hidden; 
        color: #DD4B39; 
        line-height:18px;
 }
.show{ visibility:visible}
.redborder{ border:1px solid #DD4B39}
  • 大小: 10.9 KB
0
0
分享到:
评论

相关推荐

    JQuery表单提交和后台交互源码20130509

    仅使用jQuery提交表单和后台交互,不使用基于jQuery的表单插件 方式1、取到页面控件的值后拼接放在data中,传递到后台 方式2、页面序列化后放在data中,传递到后台 注:此种方式需设置页面控件的name属性

    练习-基于jquery的表单验证控件

    自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...

    jQuery 表单验证插件

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...

    JQuery验证jsp页面属性是否为空(实例代码)

    说明:验证是否为空的前提首先要保证是在提交form之前验证的,如果验证结果有为空的项那么限制表单不能提交,并且提示验证错误信息,验证页面属性都不为空的情况下表单正常提交,这部分属于JS部分的东西,与后台业务...

    绝对好用的jquery表单全自动验证插件

    allowblank:可选 值为“true|false”默认为true 是否允许为空,如果设为true则值为空的时候也能通过验证,对*,ajax,checkbox,radiobox,reg无效 reg: 正则表达式规则,只能用开datatype为reg的时候,否则无效 ajax...

    jQuery验证表单插件

    非常轻量级的一个验证表单插件,减少了程序员大量编写正则表达式来验证表单填写的完整性,每个验证规则只需一个属性便可实现,如验证非空,只需要给该字段添加属性required:true便可搞定,非常简单实用

    jQuery实用的注册表单验证代码.zip

    代码简介:jQuery简单的注册表单验证代码是一款设置blur属性进行注册表单元素验证。

    jquery 表单验证之通过 class验证表单不为空

    在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护。...本章案例提示属性为notNull。 3:通过jQuery遍历页面中所有calss为noNull的表单,

    bootstrapvalidator是一款简单实用的Bootstrap3表单验证jQuery插件

    bootstrap-validator是一款简单实用的Bootstrap3表单验证jQuery插件。该表单验证插件使用HTML5的data属性来设置验证属性,可以完成所有常用的表单验证功能。

    jQuery网页注册表单验证代码特效.zip

    jQuery简单的注册表单验证代码是一款设置blur属性进行注册表单元素验证。

    jQuery formValidator表单验证插件示例源码

    jQuery formValidator表单验证插件示例源码 jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的...

    jQuery formValidator表单验证插件

    jQuery formValidator表单校验插件支持的验证功能: 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你...

    jQuery网页注册表单验证代码

    jQuery网页注册表单验证代码是一款简单的设置blur属性进行注册表单元素验证网页特效。

    jQuery Validate表单验证插件 添加class属性形式的校验

    本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一、jQuery表单验证插件,添加class属性形式的校验 &lt;html&gt; &lt;head&gt; &lt;meta...

    jQuery实现表单动态添加数据并提交的方法

    主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考...

    Jquery表单验证(采用poshytip提示)

    1、采用Jquery + poshytip +正则表达式进行表单验证; 2、调用页面无需多加Js调用,直接在所需使用的表单域上加相应的属性即可; 3、表单接交时将自动进行判断与Tip错误提示;

    自定义基于jQuery的客户端表单验证工具

    我这里设计了一个简单的javascript客户端验证工具,在页面中只需要对要进行验证的表单(form)及其所属的表单域对象(input)进行属性声明,即可完成配置,基本不需要手工书写javascript代码即可完成验证工作。

    JQuery表单验证插件EasyValidator,超级简单易用!

    本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。 DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对...

    JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

    1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章 http://blog.csdn.net/jianzhonghao/article/details/52503431) 1.1 通过submit 按钮提交后 会根据form的属性action=...

Global site tag (gtag.js) - Google Analytics