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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
javascript复制对象使用说明
Jun 28 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
实现vuex原理的示例
Oct 21 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
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php的常量和变量实例详解
2017/06/27 PHP
PHP反射实际应用示例
2019/04/03 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
React快速入门教程
2017/01/17 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python调用fortran模块
2016/04/08 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python如何爬取个性签名
2018/06/19 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
年终考核评语
2014/01/19 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
委托公证书
2014/04/08 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫