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中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
怎么清空javascript数组
May 11 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
Vue中引入样式文件的方法
Aug 18 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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 分页类实现代码
2009/12/03 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python显示生日是星期几的方法
2015/05/27 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python查看列的唯一值方法
2018/07/17 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
铅球加油稿100字
2014/09/26 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
MySQL主从切换的超详细步骤
2022/06/28 MySQL
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL