本文实例为大家分享了js登录验证的具体代码,供大家参考,具体内容如下
1.<script></script>的三种用法:
1.放在<body>中
2.放在<head>中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/lx.js">3.放在外部JS文件中
document.getElementById('demo').innerHTML = Date()
运行截图:
三种输出数据的方式:
1.使用 document.write() 方法将内容写到 HTML 文档中。
2.使用 window.alert() 弹出警告框。
3.使用 innerHTML 写入到 HTML 元素。
1).使用 "id" 属性来标识 HTML 元素。
2).使用 document.getElementById(id) 方法访问 HTML 元素。
3).用innerHTML 来获取或插入元素内容。
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/lx.js">运行截图:
3.登录页面准备:
1.增加错误提示框。
2.写好HTML+CSS文件。
3.设置每个输入元素的id
4.定义JavaScript 函数。
1.验证用户名6-20位
2.验证密码6-20位
5.onclick调用这个函数。
html代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/lx.js">js文件代码如下:
function fnLogin() { var oUname = document.getElementById("uname") var oUpass = document.getElementById("upass") var oError = document.getElementById("error_box") if (oUname.value.length > 20 || oUname.value.length < 6) { oError.innerHTML = "请输入6-20位字符" } if (oUpass.value.length > 20 || oUpass.value.length < 6) { oError.innerHTML = "请输入6-20位字符" } }CSS代码如下:
.div { border: 5px solid #cccccc; width: 400px; text-align: center; } .p{ font-family:华文楷体 ; } .h{ font-family: 华文楷体; }运行截图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年10月09日
2024年10月09日
- 【原神】V5.0攻略 | 纳塔入门手册·燃素定量篇
- 战略游戏《盟军敢死队:起源》已于Steam上线试玩版
- 这几天,有多少玩家被魔性的“沙威玛”洗脑了?
- 英国9月游戏销量排行榜:《EA Sports FC 25》领跑
- 大侠立志传囚龙之地任务怎么做 任务图文攻略
- 新月同行碎银子技能介绍 六星绑定者碎银子
- 炉石传说T0天梯卡组推荐 2024最强卡组一览
- 英雄联盟世界赛2024门票多少钱 S14世界赛2024门票价格介绍
- lols14全球总决赛门票去哪买 s14世界赛2024门票购买方法
- dnf手游决斗场商店买什么好 决斗场商店高性价比物品购买推荐
- IGN评价《寂静岭2RE》:最痛苦却最成功的恐怖体验
- 西班牙全跨性别足球队首次亮相 将正式踢比赛
- 《怪猎荒野》新接待员超受欢迎 玩家:新老婆来了!
- 王钰《尘雾涅槃——王钰古筝独奏专辑》[320K/MP3][148.89MB]
- 王钰《尘雾涅槃——王钰古筝独奏专辑》[FLAC/分轨][298.09MB]