JavaScript 基础，登录验证

最新推荐文章于 2022-08-18 16:56:19 发布

weixin_34323858

最新推荐文章于 2022-08-18 16:56:19 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/1257-/p/7729051.html

版权

1、<script></script>的三种用法：

放在<body>中

放在<head>中

放在外部JS文件中

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互页面</title>
    <script type="text/javascript" src="../static/jsp/js.js"></script>
    <script type="text/javascript">alert('这是head里面的javascript代码')</script>
</head>
<body>

<p id="demo">www</p>
<script>
    document.getElementById('demo').innerHTML = Date()
</script>

<button type="button" onclick=window.alert("number")>press</button>
</body>
</html>

js代码：

alert('这是js文件里的javascript代码')

2、三种输出数据的方式：

使用 document.write() 方法将内容写到 HTML 文档中。

使用 window.alert() 弹出警告框。

使用 innerHTML 写入到 HTML 元素。

使用 "id" 属性来标识 HTML 元素。

使用 document.getElementById(id) 方法访问 HTML 元素。

用innerHTML 来获取或插入元素内容。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互页面</title>
</head>
<body>

<p id="demo">www</p>
<script>
    document.getElementById('demo').innerHTML=Date()
</script>

<button type="button" onclick=window.alert("number")>press</button>
</body>
</html>

3、登录页面准备：

增加错误提示框。

写好HTML+CSS文件。

设置每个输入元素的id

4、定义JavaScript 函数。

验证用户名6-20位

验证密码6-20位

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>

    <link rel="stylesheet" type="text/css" href="../static/css/deng.css">

    <script>
        function fnLogin() {
            var Uname = document.getElementById("name")
            var Upass = document.getElementById("pass")
            var oError = document.getElementById("error_box")
            if (Uname.value.length < 6) {
                oError.innerHTML = "用户名至少6-20位"
            }
        }

    </script>
</head>
<body>
<div class="box">
    <h1>登录</h1>

    <div class="input_box">
        <input id="name" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
        <input id="pass" type="password" placeholder="请输入密码">
    </div>
    <div id="error_box"><br>
    </div>
    <div class="input_box">
        <button οnclick="fnLogin()">登录</button>
    </div>

</div>

</body>
</html>

css代码如下：

.box {
    border: 1px solid #cccccc;
    position: absolute;
    top: 25px;
    left: 40px;
    float: left;
    height: 300px;
    width: 400px;
}

h1 {
    font-family: 宋体;
    font-size: 28px;
    text-align: center;
    background: #cccccc;
    margin-top: auto;
    height: 40px;
    width: 400px;
}

.input_box {
    height: 60px;
    width: 80px;
    margin-left: 10%;
}

input {
    align-self: center;
    height: 30px;
    width: 280px;

}

button {
    align-content: center;
    font-family: 宋体;
    font-size: 28px;
    text-align: center;
    background: #cccccc;
    height: 40px;
    width: 300px;
}

5、onclick调用这个函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互页面</title>
</head>
<body>

<button type="button" onclick=window.alert("number")>press</button>

</body>
</html>

转载于:https://www.cnblogs.com/1257-/p/7729051.html

weixin_34323858

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础，登录验证

1、<script></script>的三种用法：放在<body>中放在<head>中放在外部JS文件中代码如下：<!DOCTYPE html><html lang="en"><head> <meta char...
复制链接

扫一扫