JavaScript 基础，登录验证

  1. <script></script>的三种用法：
    1. 放在<body>中
    2. 放在<head>中
    3. 放在外部JS文件中

 

1.1代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<script type="text/javascript">alert('这是body里面的javascript代码')</script>

</body>
</html>

 

 

运行结果：

 

 

 

 

 

 

1.2代码如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script type="text/javascript">alert('这是head里面的javascript代码')</script>
</head>
<body>

</body>
</html>

 

 

运行结果：

 

 

1.3代码如下：

 

 667.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <script type="text/javascript" src="../static/js/667.js"></script>
</head>
<body>

</body>
</html>

667.js

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

 

运行结果：

 

 

 

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

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

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

c.使用 innerHTML 写入到 HTML 元素。

  1. 使用 "id" 属性来标识 HTML 元素。
  2. 使用 document.getElementById(id) 方法访问 HTML 元素。
  3. 用innerHTML 来获取或插入元素内容。

 

2.a

代码如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<script>
     document.write('这是一段javascript代码')
</script>

</body>
</html>

 

运行结果：

2.b

代码如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<script>
     window.alert('这是一段javascript代码')
</script>

</body>
</html>

 

运行结果：

 

 

2.c

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<h1 id="sc">欢迎光临我的梦</h1>
<script>
document.getElementById("sc").innerHTML="欢迎光临皮卡丘乐园"
</script>
</body>
</html>

 

运行结果：

 

 

 

3.登录页面准备：

  1. 增加错误提示框。
  2. 写好HTML+CSS文件。
  3. 设置每个输入元素的id

代码如下：

 667.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function miao(){
        var oUname=document.getElementById("uname");
        var oUpass=document.getElementById("upass");
        var oError=document.getElementById("error_box");
if (oUname.value.length<6){
   oError.innerHTML="用户名至少6位"
}



    }
    </script>
</head>皮卡丘乐园
 <link rel="stylesheet" type="text/css" href="../static/css/667.css">
<body class=mao>
<h1 id="sc">欢迎光临我的梦</h1>
<script>
document.getElementById("sc").innerHTML="欢迎光临皮卡丘乐园"
</script>
<div id=mao><p></p>
    <div id="header"><h2 >Login</h2></div>
    <div id="content">
        <form><br/>

           &nbsp Username:<input id="uname" type="text" name="user" placeholder="input your username"><br/><br/>
           &nbsp Password:<input id="upass" type="password" name="password" placeholder="input your password"><br/><br/>
             &nbsp &nbsp<input type="radio" name="role" value="stu">student
            <input id="tea" type="radio" name="role" value="tea">teacher<br/><br/>
            <input id="rem" type="checkbox" value="true"><span>remember me</span> &nbsp &nbsp &nbsp &nbsp<a href="http://help.clouddream.net/newsitem/277741776" target="_blank">Login problem</a><br/>
            <br/>
            <div id="error_box"><br></div>
             &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<input id="input_box" type="button" value=" login " onclick="miao()">
        </form>
    </div>
    <div id="footer"><i>版权：@yubz</i></div>
</div>

<a href="https://www.baidu.com/" target="_blank">搜索一下吧~</a>
<a href="https://baike.so.com/doc/119187-125839.html" target="_blank"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507869214059&di=50320e9634cb246f1de5aa08390bc662&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Fh1%2F301%2Fd%2F106.jpg" alt="bucunzai"></a>
</body>
</html>

667.css

#header {
    background-color: aquamarine
}

h2 {
    align-content: center;

    margin-bottom: 0
}

#content {
    background-color: beige;
    height: 200px

}

#footer {
    background-color: aquamarine
}

#mao {
    width: 400px;
    margin-left: 800px;

}
#mao p{
    color:azure;

}
.mao{
    background-image:url(../../static/105.jpg)
}
#sc{
     color:azure;
}

 

运行结果：

 

 

4.定义JavaScript 函数。

    1. 验证用户名6-20位
    2. 验证密码6-20位

代码如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function miao(){
        var oUname=document.getElementById("uname");
        var oUpass=document.getElementById("upass");
        var oError=document.getElementById("error_box");

if (oUname.value.length<6 || oUname.value.length>20){
   oError.innerHTML="用户名6-20位"
}
if (oUpass.value.length<6 || oUpass.value.length>20){
   oError.innerHTML="密码6-20位"
}

if ((oUname.value.length<6 || oUname.value.length>20)&&(oUpass.value.length<6 || oUpass.value.length>20)){
   oError.innerHTML="用户名和密码必须6-20位！"
}

    }
    </script>
</head>皮卡丘乐园
 <link rel="stylesheet" type="text/css" href="../static/css/667.css">
<body class=mao>
<h1 id="sc">欢迎光临我的梦</h1>
<script>
document.getElementById("sc").innerHTML="欢迎光临皮卡丘乐园"
</script>
<div id=mao><p></p>
    <div id="header"><h2 >Login</h2></div>
    <div id="content">
        <form><br/>

           &nbsp Username:<input id="uname" type="text" name="user" placeholder="input your username"><br/><br/>
           &nbsp Password:<input id="upass" type="password" name="password" placeholder="input your password"><br/><br/>
             &nbsp &nbsp<input type="radio" name="role" value="stu">student
            <input id="tea" type="radio" name="role" value="tea">teacher<br/><br/>
            <input id="rem" type="checkbox" value="true"><span>remember me</span> &nbsp &nbsp &nbsp &nbsp<a href="http://help.clouddream.net/newsitem/277741776" target="_blank">Login problem</a><br/>
            <br/>
            <div id="error_box"></div>

             &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<input id="input_box" type="button" value=" login " onclick="miao()">
        </form>
    </div>
    <div id="footer"><i>版权：@yubz</i></div>
</div>

<a href="https://www.baidu.com/" target="_blank">搜索一下吧~</a>
<a href="https://baike.so.com/doc/119187-125839.html" target="_blank"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507869214059&di=50320e9634cb246f1de5aa08390bc662&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Fh1%2F301%2Fd%2F106.jpg" alt="bucunzai"></a>
</body>
</html>

 

运行结果：

用户名<6：

用户名>20：

 用户名不合法：

 

 密码不合法：

用户名和密码都不合法：

 

 

 

 

5.onclick调用这个函数。

 代码如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <script>
        function miao(){alert('这是一段javascript代码')}

</script>
</head>
<body>

 <input id="input_box" type="button" value="点击我" onclick="miao()">


</body>
</html>

 

运行结果：

 

 

 

 

posted on 2017-10-25 14:57  046余博智  阅读(312)  评论(0)  编辑  收藏  举报

导航