js表单登陆验证示例


Posted in Javascript onOctober 19, 2016

本文实例讲述了js表单登陆验证的方法。分享给大家供大家参考,具体如下:

<!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" />
<title>项目后台管理系统</title>
<link rel="stylesheet" href="__PUBLIC__/css/login.css" />
<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
<script type="text/javascript">
function $(id)
{
  return document.getElementById(id);
}
//验证姓名
function checkname(){
  var name=$("admin_name").value;
  if(name=='')
  {
   $('s1').innerHTML='姓名不能为空';
   $('s1').style.color='red';
   return false;
  }
  else
  {
    $('s1').innerText='ok';
    $('s1').style.color='green';
    return true;
  }
}
//验证密码
function checkpwd(){
  var password=$("password").value;
  if(password=='')
  {
   $('s2').innerHTML='密码不能为空';
   $('s2').style.color='red';
   return false;
  }
  else
  {
    $('s2').innerHTML='ok';
    $('s2').style.color='green';
    return true;
  }
}
//验证所有表单提交
function checkall()
{
  if(checkname()&&checkpwd())
  {
    return true;
  }
  else
  {
    return false;
  }
}
</script>
</head>
<body class="b">
<div class="lg">
<form action="__URL__/dologin" method="POST" onsubmit="return checkall();">
  <div class="lg_top"></div>
  <div class="lg_main">
    <div class="lg_m_1">
    <input name="admin_name" value="" class="ur" id="admin_name" onblur="checkname();"/><span id='s1'></span>
    <input name="password" type="password" value="" class="pw" id="password" onblur="checkpwd();"/><span id='s2'></span>
    </div>
  </div>
  <div class="lg_foot">
  <input type="submit" value="Login In" class="bn" /></div>
</form>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
javascript 节点遍历函数
Mar 28 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 #Javascript
Angular和百度地图的结合实例代码
Oct 19 #Javascript
Bootstrap Table使用方法解析
Oct 19 #Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 #Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 #Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 #Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 #Javascript
You might like
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php自动适应范围的分页代码
2008/08/05 PHP
PHP 采集心得技巧
2009/05/15 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
javascript下string.format函数补充
2010/08/24 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
深入理解JavaScript 箭头函数
2019/05/30 Javascript
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
python实现ip地址的包含关系判断
2020/02/07 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
init进程的作用
2012/04/12 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
终止合同协议书
2014/04/17 职场文书
面试必备的求职信
2014/05/25 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
网络妈妈观后感
2015/06/08 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL