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读取中文COOKIE的解决办法
Feb 15 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
jQuery 源码分析笔记
2011/05/25 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
简单了解python数组的基本操作
2019/11/26 Python
python相对企业语言优势在哪
2020/06/12 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
一些Solaris面试题
2013/03/22 面试题
装饰资料员岗位职责
2013/12/30 职场文书
小学信息技术教学反思
2014/02/10 职场文书
村容村貌整治方案
2014/05/21 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
标枪加油稿
2015/07/22 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
详解Redis基本命令与使用场景
2021/06/01 Redis
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL