JavaScript

最新推荐文章于 2024-07-08 08:31:50 发布

GodLikeOc

最新推荐文章于 2024-07-08 08:31:50 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/suifengOc/article/details/83019766

1.概述

JavaScript 是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是因特网上最流行的脚本语言

2.js—注册表单校验雏形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style></style>-->
    <!--<link>-->
    <script>
        window.onload = function () {
            // 1. 获取用户输入的用户名的标签对象;
            var uEle = document.getElementById('username');
            alert(uEle);
            // 2. 获取这个对象里面的值；
            var uValue = uEle.value;
            alert(uValue);
//
//            alert("这是一个用户名!");        弹出一个警示框

        }

    </script>



</head>
<body>

<!--
1. 需求:
    1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;
    2). 当用户填写信息之后， 对填写的信息进行校验（前端校验， 只能防君子不能防小人）

    -后台校验: 也是需要校验的；

2. 需要掌握的技能:
    0). 如何在加载页面时执行指定函数?
    1). 如何获取指定元素对象?
    2). 如何弹出一个警告框?


-->

<form action="#" method="get">
    <!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
        post: 填写的信息不会在url里面显示
        -->
    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密码: <input type="password" name="passwd" placeholder="密码"><br/>
    <input type="submit" value="注册">


</form>

</body>
</html>

在这里插入图片描述

3.js—注册表单—校验用户名是否为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style></style>-->
    <!--<link>-->
    <script>


//  *****************************1. 校验用户名是否为空? ***************************
//        需求:
//          1. 判断用户名是否为空?
//          2. 校验密码是否大于6位， 如果不满足则不合法?
        // 定义一个函数
        function checkForm() {
//        1). 获取输入用户名标签提交的内容；
            var user = document.getElementById('username').value;

//        2). if判断用户名是否为空?
//        3). 如果数据合法， 继续执行， 提交表单；
//        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
            if (user === '') {
                alert("用户名不能为空!");
                return false;
            }


// ******************************2. 校验密码长度是否小于6 **************************
// 难点: 获取密码长度(http://www.w3school.com.cn/js/js_obj_string.asp)
//            var passwdlen = document.getElementById('passwd').value.length;
            var passwdlen = document.getElementsByName('passwd')[0].value.length;
            if (passwdlen < 6){
                alert("密码不合法: 长度小于6！");
                return false;
            }
        }
    </script>


</head>
<body>

<!--
实现步骤:
    1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
    2. 对这个事件绑定一个函数(执行的操作写在函数里面);
    3. 函数的核心功能: 校验用户名是否为空?
        1). 获取输入用户名标签提交的内容；
        2). if判断用户名是否为空?
        3). 如果数据合法， 继续执行， 提交表单；
        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert


-->
<form action="#" method="get" onsubmit="return checkForm()">
    <!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
        post: 填写的信息不会在url里面显示
        -->
    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
    <input type="submit" value="注册">


</form>

</body>
</html>

在这里插入图片描述

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

    <script>
        window.onload = function () {
            /*
            var x = 5;
            var y = '5';
            var z = 5;
            alert(x == y);     // 两个等号做比较时， 会将字符串转换为整形进行比较;
            alert(x === y);
            */

            var a =(5 === '5')?'ok': 'not ok';
            alert(a);
        }



    </script>
</head>
<body>





</body>
</html>

在这里插入图片描述