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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
Prototype使用指南之base.js
Jan 10 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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/01/27 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
Python异常学习笔记
2015/02/03 Python
Python字符串替换实例分析
2015/05/11 Python
python实现决策树分类算法
2017/12/21 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python 读取串口数据的示例
2020/11/09 Python
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
高级人员简历的自我评价分享
2013/11/03 职场文书
关于母亲节的感言
2014/02/04 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
个人借款协议书范本
2014/11/17 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
革命电影观后感
2015/06/18 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书