JavaScript

最新推荐文章于 2024-08-26 15:30:34 发布

散修青年

最新推荐文章于 2024-08-26 15:30:34 发布

阅读量909

点赞数 28

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/jsb2283939167/article/details/141366619

版权

avaScript的引入方式分为以下三种：

内联方式：直接在HTML页面中嵌入JavaScript代码，使用 script 标签将JavaScript代码放置在HTML文件的 head 或 body 标签内。例如：

<head>
  <script>
    // JavaScript代码
  </script>
</head>

这种方式适用于较小的脚本或临时性的代码

外部文件方式：将JavaScript代码保存在一个独立的外部文件中，然后使用 script 标签的src属性将文件引入到HTML页面中。例如：

<head>
  <script src="script.js"></script>
</head>

在外部文件中编写JavaScript代码，可以提高代码的可维护性和重用性。

内部方式：将JavaScript代码直接嵌入HTML文件的 script 标签内，但不使用src属性引入外部文件。例如：

<head>
  <script>
    // JavaScript代码
  </script>
</head>

常见BOM&DOM操作
BOM（Browser Object Model）是指浏览器对象模型，是JavaScript中与浏览器交互的一组对象的集合。BOM提供了一系列的对象，用于操作浏览器窗口和浏览器本身。最常用的BOM对象就是window对象，alert() confim() 方法都是window的内置对象

DOM（文档对象模型）是浏览器用来表示网页文档的对象模型，通过DOM，JavaScript可以访问和操作网页中的元素和属性。最常见的就是与document相关的方法，他们都属于DOM操作，比如

getElementsByClassName()：根据元素的class属性获取DOM节点。

getElementsByTagName()：根据元素的标签名获取DOM节点。

还常用的DOM操作就是事件监听，我们可以设置对应的函数当我们监听的事件执行后自动执行，比如鼠标点击等，比如密码校验常常都是基于此。

常见的事件：

onclick：鼠标单击事件

onblur：元素失去焦点

onfocus：元素获得焦点

onsubmit：当表单提交时触发该事件

用密码校验的例子可以很好的锻炼这方面的掌握度

这个页面包含了以下功能：

在确认密码输入框失去焦点时（onblur事件），会自动验证密码是否一致，并在输入框后显示红色错误提示。

在四级成绩输入框失去焦点时，会自动验证成绩是否在0到710之间，并在输入框后显示红色错误提示。

在手机号输入框失去焦点时，会自动验证手机号格式是否正确，并在输入框后显示红色错误提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 500px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .form-group input[type="submit"] {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        .form-group input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .error {
            color: red;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>用户注册</h2>
        <form id="registrationForm" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="confirmPassword">确认密码:</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required onblur="validatePassword()">
                <div class="error" id="passwordError">密码不匹配</div>
            </div>
            <div class="form-group">
                <label for="score">四级成绩:</label>
                <input type="text" id="score" name="score" required onblur="validateScore()">
                <div class="error" id="scoreError">成绩必须在0到710之间</div>
            </div>
            <div class="form-group">
                <label for="phone">手机号:</label>
                <input type="text" id="phone" name="phone" required onblur="validatePhone()">
                <div class="error" id="phoneError">无效的手机号</div>
            </div>
            <div class="form-group">
                <input type="submit" value="提交">
            </div>
        </form>
    </div>
 
    <script>
        function validatePassword() {
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const passwordError = document.getElementById('passwordError');
            if (password !== confirmPassword) {
                passwordError.style.display = 'block';
            } else {
                passwordError.style.display = 'none';
            }
        }
 
        function validateScore() {
            const score = document.getElementById('score').value;
            const scoreError = document.getElementById('scoreError');
            if (isNaN(score) || score < 0 || score > 710) {
                scoreError.style.display = 'block';
            } else {
                scoreError.style.display = 'none';
            }
        }
 
        function validatePhone() {
            const phone = document.getElementById('phone').value;
            const phoneError = document.getElementById('phoneError');
            const phonePattern = /^1[3-9]\d{9}$/;
            if (!phonePattern.test(phone)) {
                phoneError.style.display = 'block';
            } else {
                phoneError.style.display = 'none';
            }
        }
 
        function validateForm() {
            validatePassword();
            validateScore();
            validatePhone();
            const passwordError = document.getElementById('passwordError').style.display === 'none';
            const scoreError = document.getElementById('scoreError').style.display === 'none';
            const phoneError = document.getElementById('phoneError').style.display === 'none';
            return passwordError && scoreError && phoneError;
        }
    </script>
</body>
</html>

其中：