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 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
js 动态选中下拉框
Nov 26 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
JS触摸与手势事件详解
May 09 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
vue.config.js常用配置详解
Nov 14 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
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
浅谈MySQL中的触发器
2015/05/05 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python通过链接抓取网站详解
2019/11/20 Python
python中数字是否为可变类型
2020/07/08 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
信息系统专业个人求职信范文
2013/12/07 职场文书
招股说明书范本
2014/05/06 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
初中学生操行评语
2014/12/26 职场文书
大一学生个人总结
2015/02/15 职场文书
小学教师自我评价
2015/03/04 职场文书
纪律委员竞选稿
2015/11/19 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android