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 相关文章推荐
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
JavaScript闭包详解
Feb 02 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
node.js 发布订阅模式的实例
Sep 10 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
js 上传图片预览问题
2010/12/06 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
简单了解Django模板的使用
2017/12/20 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
《乞巧》教学反思
2014/02/27 职场文书
优乐美广告词
2014/03/14 职场文书
合作协议书范本
2014/04/17 职场文书
合作与交流自我评价
2015/03/09 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS