JavaScript登录验证基础教程

网络编程发布日期：2024/9/28 浏览次数：1
正在浏览：JavaScript登录验证基础教程
本文实例为大家分享了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: 华文楷体;
}



运行截图：

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        
        
            上一篇：vue项目中使用axios上传图片等文件操作
            下一篇：vue打包后显示空白正确处理方法
        
        一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。