js表单登陆验证示例

 更新时间:2016年10月19日 14:10:33   作者:Love满天星   我要评论
这篇文章主要介绍了js表单登陆验证的方法,基于thinkPHP前端页面实现javascript针对表单用户名与密码的验证功能,需要的朋友可以参考下

本文实例讲述了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数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 详解Bootstrap glyphicons字体图标

    详解Bootstrap glyphicons字体图标

    本章将讲解Bootstrap glyphicons字体图标,并通过一些实例了解它的使用,字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中
    2016-01-01
  • 通过实践编写优雅的JavaScript代码

    通过实践编写优雅的JavaScript代码

    这篇文章主要介绍了如何通过实践编写优雅的JavaScript代码。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,下面我们来学习一下吧
    2019-05-05
  • layui 表格的属性的显示转换方法

    layui 表格的属性的显示转换方法

    今天小编就为大家分享一篇layui 表格的属性的显示转换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • React Native AsyncStorage本地存储工具类

    React Native AsyncStorage本地存储工具类

    这篇文章主要为大家分享了React Native AsyncStorage本地存储工具类,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • indexOf 和 lastIndexOf 使用示例介绍

    indexOf 和 lastIndexOf 使用示例介绍

    indexOf是在一个字符串中寻找一个字的位置,lastIndexOf 也是找字 , 它们俩的区别是前者从字符串头开始找,后者是从字符串末端开始找
    2014-09-09
  • javaScript中的原型解析【推荐】

    javaScript中的原型解析【推荐】

    下面小编就为大家带来一篇javaScript中的原型解析【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js实现下拉框选择要显示图片的方法

    js实现下拉框选择要显示图片的方法

    这篇文章主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • javascript轮播图算法

    javascript轮播图算法

    这篇文章主要为大家详细介绍了javascript轮播图算法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JS实现预加载视频音频/视频获取截图(返回canvas截图)

    JS实现预加载视频音频/视频获取截图(返回canvas截图)

    这篇文章主要介绍了JS实现预加载视频音频/视频获取截图(返回canvas截图)的相关资料,需要的朋友可以参考下
    2017-10-10
  • 第一次接触JS require.js模块化工具

    第一次接触JS require.js模块化工具

    第一次接触JS require.js模块化工具,本文为大家介绍了JS模块化工具require.js教程第一课认识require.js,编写require.js,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论