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实现简单模态窗口,背景灰显
Nov 14 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
vue实现五子棋游戏
May 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的5个入手程序
2006/11/23 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
深入PHP curl参数的详解
2013/06/17 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
安装Python的教程-Windows
2017/07/22 Python
深入了解Django中间件及其方法
2019/07/26 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
关于Python错误重试方法总结
2021/01/03 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
nohup的用法
2014/08/10 面试题
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
健康证明
2015/06/19 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
springboot读取resources下文件的方式详解
2022/06/21 Java/Android
Hive HQL支持2种查询语句风格
2022/06/25 数据库