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读取xml
Nov 04 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
vue实现简单的日历效果
Sep 24 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php跨域cookie共享使用方法
2014/02/20 PHP
php实用代码片段整理
2016/11/12 PHP
详细讲解JS节点知识
2010/01/31 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
angular.bind使用心得
2015/10/26 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Python如何实现爬取B站视频
2020/05/20 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
自主招生自荐信
2013/12/08 职场文书
中学门卫岗位职责
2013/12/26 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
教师队伍管理制度
2014/01/14 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
县级文明单位申报材料
2014/05/23 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
安全生产工作汇报
2014/10/28 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
婚育证明样本
2015/06/16 职场文书
调解协议书范本
2016/03/21 职场文书
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers