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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
JS上传前预览图片实例
Mar 25 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 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中文件缓存转内存缓存的方法
2011/12/06 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
php命令行写shell实例详解
2018/07/19 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
python怎么判断模块安装完成
2020/06/19 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
创先争优标语
2014/06/27 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
诚信考试主题班会
2015/08/17 职场文书
导游词之太原天龙山
2020/01/02 职场文书
react 路由Link配置详解
2021/11/11 Javascript