使用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
分享到:
相关推荐
仅使用jQuery提交表单和后台交互,不使用基于jQuery的表单插件 方式1、取到页面控件的值后拼接放在data中,传递到后台 方式2、页面序列化后放在data中,传递到后台 注:此种方式需设置页面控件的name属性
自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
说明:验证是否为空的前提首先要保证是在提交form之前验证的,如果验证结果有为空的项那么限制表单不能提交,并且提示验证错误信息,验证页面属性都不为空的情况下表单正常提交,这部分属于JS部分的东西,与后台业务...
allowblank:可选 值为“true|false”默认为true 是否允许为空,如果设为true则值为空的时候也能通过验证,对*,ajax,checkbox,radiobox,reg无效 reg: 正则表达式规则,只能用开datatype为reg的时候,否则无效 ajax...
非常轻量级的一个验证表单插件,减少了程序员大量编写正则表达式来验证表单填写的完整性,每个验证规则只需一个属性便可实现,如验证非空,只需要给该字段添加属性required:true便可搞定,非常简单实用
代码简介:jQuery简单的注册表单验证代码是一款设置blur属性进行注册表单元素验证。
在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护。...本章案例提示属性为notNull。 3:通过jQuery遍历页面中所有calss为noNull的表单,
bootstrap-validator是一款简单实用的Bootstrap3表单验证jQuery插件。该表单验证插件使用HTML5的data属性来设置验证属性,可以完成所有常用的表单验证功能。
jQuery简单的注册表单验证代码是一款设置blur属性进行注册表单元素验证。
jQuery formValidator表单验证插件示例源码 jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的...
jQuery formValidator表单校验插件支持的验证功能: 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你...
jQuery网页注册表单验证代码是一款简单的设置blur属性进行注册表单元素验证网页特效。
本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一、jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta...
主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考...
1、采用Jquery + poshytip +正则表达式进行表单验证; 2、调用页面无需多加Js调用,直接在所需使用的表单域上加相应的属性即可; 3、表单接交时将自动进行判断与Tip错误提示;
我这里设计了一个简单的javascript客户端验证工具,在页面中只需要对要进行验证的表单(form)及其所属的表单域对象(input)进行属性声明,即可完成配置,基本不需要手工书写javascript代码即可完成验证工作。
本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。 DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对...
1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章 http://blog.csdn.net/jianzhonghao/article/details/52503431) 1.1 通过submit 按钮提交后 会根据form的属性action=...