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 相关文章推荐
jquery中eq和get的区别与使用方法
Apr 14 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
js继承实现方法详解
Dec 16 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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制作文本式留言板
2015/03/18 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python常用函数详解
2016/09/13 Python
使用python实现tcp自动重连
2017/07/02 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Django ModelForm操作及验证方式
2020/03/30 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
运动会广播稿30字
2014/01/21 职场文书
法学院方阵解说词
2014/01/29 职场文书
英文演讲稿开场白
2014/08/25 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
四年级小学生评语
2014/12/26 职场文书
重温入党誓词主持词
2015/06/29 职场文书
运动会5000米加油稿
2015/07/21 职场文书
信息技术研修心得体会
2016/01/08 职场文书
Python 多线程处理任务实例
2021/11/07 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript