js验证表单密码、用户名是否输入--JS的简单应用
1、在登录、注册时,我们经常会遇到下面这种情况,如果我们没有输入用户名、密码时,系统会弹出提示框。提示框信息提示内容是我们密码没有输入密码或者用户名等。那么这样的弹出框效果是如何实现的呢?文章标题既然与js有关,那么我们就用js来实现这个功能,当然实现此功能的还有其他方法,在这里我用js去实现。
2、用表格布局先布局一个简单的html表单页面:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js验证表(是否输入单用户名、密码)</title>
<style type="text/css">
*{padding: 0;margin: 0}
table{margin:0 auto;margin-top: 200px}
</style>
</head>
<body>
<form name="form1" method="post" action=""><!--这里用js实现跳转-->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="50" colspan="2" bgcolor="#eeeeee" align="center">用户登录</td>
</tr>
<tr>
<td width="70" height="50">用户名:</td>
<td><input name="user" type="text" id="user" maxlength="8"><!--8指的是8个汉字,8个字符--></td>
</tr>
<tr>
<td width="70" height="50">密 码:</td>
<td><input name="pwd" type="password" id="pwd" maxlength="16"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="reset" type="reset" value="重置">
<input name="button" type="button" value="登录" onclick="check()">
</td>
</tr>
</table>
</form>
<script language="JavaScript" type="text/javascript" src="demo.js"></script>
</body>
</html>
html页面效果图:
然后新建js文件:demo.js,代码如下:
function check() {
var user_name=form1.user.value;//获取表单form1的用户名的值
var user_pwd=form1.pwd.value;//获取表单form1密码值
if((user_name=="")||(user_name==null)){//判断用户名是否为空,为空就弹出提示框"请输入用户名",否则正常执行下面的代码。
alert("请输入用户名!");
form1.user.focus();//获取焦点,即:鼠标自动定位到用户名输入框,等待用户输入用户名。
return;
}
else if((user_pwd=="")||(user_pwd==null)){//判断密码是否为空,为空就弹出提示框"请输入密码",否则正常执行下面的代码。
alert("请输入密码!");
form1.pwd.focus();//获取焦点。
return;}
else {//如果用户名、密码都正常输入,则提交表单,浏览器经打开新的(主页)窗口。
form1.submit();
// window.location.href="http://baidu.com/";
window.open("http://www.cnblogs.com/qikeyishu/");
}
}
效果图:
分析:在这里我们运用了常见的if判断语句只需对用户名、密码设定不能为null(空)进行判定,即可实现此功能。
js验证表单密码、用户名是否输入--JS的简单应用的更多相关文章
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
- jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- js 验证表单 js提交验证类
附加:js验证radio是否选择 <script language="javascript">function checkform(obj){for(i=0;i< ...
- js验证表单大全3
2 >表单提交验证类 2.1 表单项不能为空 <scriptlanguage="javascript"> <!-- function CheckForm( ...
- js验证表单大全1
附加:js验证radio是否选择 <script language="javascript"> function checkform(obj) { for(i=0;i& ...
- js验证表单大全2
屏蔽右键 很酷 oncontextmenu="return false" ondragstart="return false"onselectstart=&q ...
- js验证表单并提交
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js验证表单
在日常生活中,对于上班时间比较灵活的单位来说,如何能够及时.准确地令公司员工了解自己的上班时间是一个棘手的问题.公司管理人员不会一个挨一个地打电话通知,难免总有员工会弄错自己的上班时间.这样,可以求助 ...
- js实现表单验证 常用JS表单验证
CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...
随机推荐
- THREE笛卡尔右手坐标系详解
1,正常的笛卡尔右手坐标系,以屏幕右方为+X轴,屏幕上方为+Y轴,垂直屏幕向外为+Z轴,如下图,xy轴组成的平面为屏幕面 但由于THREE里的相机并不总是从屏幕正前方视角,还可以设置坐标系任意一个轴为 ...
- Spring Controller单元测试
SpringMVC controller测试较简单,从功能角度划分,可分为两种.一种是调用请求路径测试,另一种是直接调用Controller方法测试. 调用请求路径测试 通过请求路径调用,请求需要经过 ...
- Spark踩坑记——从RDD看集群调度
[TOC] 前言 在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了 ...
- fidder从基础到熟练
一.fidder介绍 1.Fiddler是一款由C#语言开发的免费http调试代理软件,有.net 2 和 .net 4 两种版本.Fiddler能够记录所有的你电脑和互联网之间的http通讯,Fid ...
- Linux上open-iscsi 的安装,配置和使用
关于open-iscsi open-iscsi是一个实现 RFC3720 iSCSI协议的高性能initiator程序.iSCSI使得访问SAN上的存储不再只能依赖Fibre Channel,也可以通 ...
- JS 使用 splice() 对数组去重
一 问题 有如下 js 数组 connect_clients,需要在去掉所有元素中 user_id, goods_id 这两者的值都相同的元素. [ { id: 'eff040fb-92bc-4f24 ...
- SQL SERVER大话存储结构(6)_数据库数据文件
数据库文件有两大类:数据文件跟日志文件,每一个数据库至少各有一个数据文件或者日志文件,数据文件用来存储数据,日志文件用来存储数据库的事务修改情况,可用于恢复数据库使用. 这里分 ...
- eclipse 好用的插件总结
改变eclipse的背景色,各种关键词颜色的插件. color theme. 在mac下最好是通过手动复制粘贴jar文件到, eclipse的plugins下面. 通过Install new soft ...
- SQL SERVER 自动生成 MySQL 表结构及索引 的建表SQL
SQL SERVER的表结构及索引转换为MySQL的表结构及索引,其实在很多第三方工具中有提供,比如navicat.sqlyog等,但是,在处理某些数据类型.默认值及索引转换的时候,总有些 ...
- Lucence
Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎和索引引 ...