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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python itertools模块详解
2015/05/09 Python
Python循环语句之break与continue的用法
2015/10/14 Python
让python在hadoop上跑起来
2016/01/27 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python内存动态分配过程详解
2019/07/15 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python Process多进程实现过程
2019/10/22 Python
Python下载的11种姿势(小结)
2020/11/18 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
公司离职证明范本(汇总)
2014/09/10 职场文书
交通事故案件代理词
2015/05/23 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python