js 表单检验 dom bom

最新推荐文章于 2023-12-02 13:44:48 发布
最新推荐文章于 2023-12-02 13:44:48 发布
阅读量198 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WOF_Spark/article/details/107563791
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window对象</title>
    <style>
        .t-left {
            /*文字靠左边*/
            text-align: left;

        }

        input[type="text"], input[type="password"], input[type="email"]
         {
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 10px;
            padding-right: 10px;
            border-radius: 4px; /*圆角*/
            border: gray solid 1px;
            margin-left: 30px; /*指定左边距，调节左边距的距离*/
        }

        body {

            background-image: url("timg.jpg");

        }

        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .mid {
            font-size: 15px;
            float: left;
            width: 47%;
            margin-top: 280px;
        }
        body > div {
            width: 850px;
            height: 400px;
            background-color: white;
            border: gray solid 8px;
            margin: 60px auto;
        }

        .left {
            float: left;
            width: 25%;
            margin-left: 20px;
            margin-top: 20px;
        }

        .first {
            font-size: 20px;
            color: orange;

        }

        .left p:last-child {
            font-size: 20px;
            color: gray;
        }

        .right {
            float: right;
            width: 25%;
        }

        .right p {
            font-size: 15px;
            padding: 10px 10px 0px 0px;
            float: right;
            margin-left: 30px;
            color: gray
        }



    </style>
    <script>

        function shoeTips(spanId, tips) {

            var span = document.getElementById(spanId);

            span.innerHTML = tips;

        }

        /**

         * 校验用户名

         */

        function hint() {

            var value = document.getElementById("value").value;

            var hint = document.getElementById("hint");

            if(value.length < 6) {

                hint.innerHTML = "用户名太短";

                return false;

            } else {

                hint.innerHTML = "用户名合格";

                return true;

            }

        }



        function hint_hide() {

            var hint = document.getElementById("hint");

            hint.innerHTML = "";

        }

        /**

         * 校验密码

         */



        function checkPass() {

            var value = document.getElementById("pass_value").value;

            var hint = document.getElementById("pass_hint");

            if(value.length < 6) {

                hint.innerHTML = "密码太短";

                return false;

            } else {

                hint.innerHTML = "密码格式合格";

                return true;

            }

        }



        function pass_hide() {

            var hint = document.getElementById("pass_hint");

            hint.innerHTML = "";

        }

        /***

         * 确认密码的校验

         */

        function checkPassPass() {

            var papavalue = document.getElementById("passpass_value").value;

            var value = document.getElementById("pass_value").value;

            var papahint = document.getElementById("passpass_hint");

            if(papavalue != value) {

                papahint.innerHTML = "两次密码不一致";

                return false;

            } else {

                papahint.innerHTML = "合格";

                return true;

            }

        }



        function passpass_hide() {

            var papahint = document.getElementById("passpass_hint");

            papahint.innerHTML = "";

        }

        /**

         * 校验邮箱

         */

            function checkEmail(strEmail)

            {

                var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])$/;

                if ( emailReg.test(strEmail) ) {

                    return true;

                }

            else {

//      alert("您输入的Email地址格式不正确！");

                return false;

            }

        };

        function emailCheck() {

            var emailValue = document.getElementById("email").value;

            var email_hint = document.getElementById("email_hint");

            var flag = checkEmail(emailValue);

            if(flag) {

                email_hint.innerHTML = "邮箱格式正确";

                return true;

            } else {

                email_hint.innerHTML = "邮箱格式错误";

                return false;

            }

        }



        function emailHide() {

            var email_hint = document.getElementById("email_hint");

            email_hint.innerHTML = "";

        }

        /**

         * 校验手机号

         */

        function checkMobile( strMobile )

        {	//13588888888

            var regu = /^[1][345678][0-9]{9}$/;


            if (regu.test(strMobile)) {

                return true;

            }

            else {

                return false;

            }

        };

        function phoneCheck() {

            var phone = document.getElementById("phone").value;

            var phone_hint = document.getElementById("phone_hint");

            var flag = checkMobile(phone);

            if(flag) {

                phone_hint.innerHTML = "手机号格式正确";

                return true;

            } else {

                phone_hint.innerHTML = "手机号格式错误";

                return false;

            }

        }



        function phoneHide() {

            var phone_hint = document.getElementById("phone_hint");

            phone_hint.innerHTML = "";

        }



        function checkForm() {

            var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck();

            return flag;


        }


    </script>
</head>
<body>



<form action="#" onsubmit="return checkForm()">
    <div class="left">
        <p class="first">新用户注册</p>
        <p class="third">user register</p>
    </div>
    <table align="center" bgcolor="blue" width="550" border="1">

        <div class="mid">
    <tr>
        <div class="text">

            <td class="t-left"><p>用户名</p>

            </td>
            <td class="t-right"><input id="value" onfocus="shoeTips('hint','用户名长度不能小于六')" onblur="hint_hide()" onkeyup="hint()" type="text" Name="Userame" placeholder="用户名" />

            <span id="hint"></span>
            </td>

        </div>
     </tr>
        <tr>

        <div class="text">
            <td class="t-left"><p>密码</p>
            </td>
            <td class="t-right"> <input id="pass_value" onfocus="shoeTips('pass_hint','密码长度不能小于六')" onblur="pass_hide()" onkeyup="checkPass()" type="password" name="password" placeholder="密码" />


            <span id="pass_hint"></span>
            </td>

        </div>
        </tr>

        <tr>
        <div class="text">

            <td class="t-left"><p>确认密码</p></td>

            <td class="t-right"><input id="passpass_value" onfocus="shoeTips('passpass_hint','两次密码要一致')" onblur="passpass_hide()" onkeyup="checkPassPass()" type="password" name="password" placeholder="确认密码" />

            <span id="passpass_hint"></span>
            </td>

        </div>
        </tr>

        <tr>
        <div class="text">

            <<td class="t-left"><p>邮箱</p></td>

            <td class="t-right"><input id="email" onfocus="shoeTips('email_hint','邮箱格式要正确')" onblur="emailHide()" onkeyup="emailCheck()" type="email" name="email" placeholder="邮箱" />
            <span id="email_hint"></span></td>

        </div>
        </tr>

        <tr>
        <div class="text">

            <td class="t-left"><p>手机号</p></td>

            <td class="t-right"><input id="phone" type="text" onfocus="shoeTips('phone_hint','格式为十一位数字的手机号')" onblur="phoneHide()" onkeyup="phoneCheck()" Name="Phone" placeholder="手机号">

            <span id="phone_hint"></span>
        </td>
        </div>
        </tr>



        <tr>
        <div class="submit" >
        <td colspan="2" align="center"> <input type="submit" name="登录" value="登录"></td>
    </div>
        </tr>

        <div class="right">
            <p>已有账号？<a href="#">立即登陆</a></p>
        </div>

        </div>
    </table>
</form>

</body>
</html>

还是丑 太麻烦了 不像修改了
检验 只演示一个了
****

Good1uckBoy
关注
Javascript之BOM与DOM讲解
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JS中的DOM与BOM
CodeNotes
08-08 3134
一.Javascript组成 JavaScript的实现包括以下3个部分： ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口 javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaS...
总结：JavaScript进阶重点（DOM、BOM）
熟悉JS拼写的FE
07-20 601
一、DOM 1. dom树 2. document对象 2.1 常用属性 2.2 获取文档元素 2.3 获取特殊元素(body,html) 3. 元素对象 3.1 Element 3.2 HTMLCollection 4. 节点操作 4.1 节点层级 5.DOM事件 5.1 鼠标事件 5.2 键盘事件 5.3 注册事件 5.4 触屏事件对象(touchEvent) 5.5 事件流 5.6 事件对象 5.7 默认行为与冒泡阻止 5.8 事件委托 二、BOM 1. Window对象 1.1 属性 1.2 方法
JavaScript基础之必会的DOM BOM操作
小小前端攻城狮的博客
03-15 1116
#mermaid-svg-Vcro16RtxaBJkA1K .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Vcro16RtxaBJkA1K .label text{fill:#333}#mermaid-svg-Vcro16RtxaBJkA1K .node rect,#mermaid-svg-Vcro16Rtxa
前端技术学习第四讲：JavaScript中DOM和BOM
跟着老高学Java
03-27 1714
JavaScript中DOM和BOM 一、DOM和BOM DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。 BOM：浏览器对象模型（Browser Object Model)，简称BOM），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可
JS中的对象模型——DOM、BOM
qq_62225979的博客
03-06 368
DOM和BOM是Web开发中的两个重要模型 Javascript可以通过DOM定位指定的元素，属性，进而实现查找、修改、创建等操作
JavaScript高级开发必备：Bom和Dom全解析
会思想的苇草i的博客
12-23 951
JavaScript BOM（浏览器对象模型）和DOM（文档对象模型）是前端开发中的两个重要概念。BOM是用于操作浏览器窗口、浏览器历史记录和浏览器位置等的API，而DOM则是用于操作HTML和XML文档中的元素和属性的API。通过使用BOM和DOM，开发人员可以创建交互性更强的网页，实现动态效果和用户交互功能。
JavaScript中的DOM和BOM对象
weixin_51473175的博客
12-02 245
DOM和BOM对象，包括获取对象、事件、节点、js执行机制、正则表达式等
js中BOM和DOM总结（基础篇）
m0_63622279的博客
10-05 1407
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
Javascript中DOM、BOM区别
枫叶时代的博客
07-31 407
一.Javascript组成 JavaScript的实现包括以下3个部分： ECMAScript(核心) 描述了JS的语法和基本对象。 文档对象模型 （DOM） 处理网页内容的方法和接口 浏览器对象模型（BOM） 与浏览器交互的方法和接口 avascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的...
js基础语法 事件 ECMAScript BOM DOM 弹窗 计时事件 改变HTML内容
weixin_45279447的博客
12-29 183
文章目录核心语法--变量核心语法--typeof运算符核心语法--string对象核心语法--数组核心语法--运算符号核心语法--逻辑控制语句核心语法--注释：核心语法--常用的输入/输出核心语法--语法约定核心语法--函数事件：什么是ECMAScript什么是BOM：什么是DOMJavaScript弹窗：window.location对象JavaScript计时事件：改变HTML内容 核心语法–变量 1、先声明变量在赋值 var width； wid
【Web前端笔记-基础】第十三课，Javascript的DOM和BOM基础部分
嘿嘿嘿的博客
11-21 295
一：基础概念 Web APIs 是W3C组织的标准。 Web APIs 我们主要学DOM和BOM的部分 Web APIs 是JS所独有的 主要学习页面交互的功能 需要使用JS基础部分作基础 二：API和Web API API：是指应用程序编程接口，是一些预定义的函数，目的是提供应用程序与开发人员于某软件或硬件得以访问一组历程的能力，而又无需访问源码或理解内部工作机制的细节。 Web ...
JavaScript学习笔记(一) JS基础+DOM+BOM
kianagrow的博客
05-04 354
1. JavaScript简介 1.1 JavaScript 是什么 JavaScript 是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 1.2 JavaScript 的作用 ① 表单动态校验（密码强度检测） （ JS 产生最初的目的 ） ② 网页特效 ③ 服务端开发(Node.js) ④ 桌面程序(Electron) ⑤ App(Cordova).
Java web前端——JavaScript的DOM、BOM、计时函数
冷漠的小猿
09-02 562
JavaScript的DOM JavaScript主要包括三部分内容:ECMAScript、DOM、BOM 1.1 DOM概述 通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，JavaSc...
基于Kotlin和Java的蓝牙工具设计源码分享
10-02
该开源项目是一款基于Kotlin和Java的蓝牙工具设计，总计包含157个文件，其中90个为Kotlin源代码文件，22个为PNG图像文件，21个为XML布局文件，6个为Gradle构建脚本文件，4个为Git忽略配置文件，4个为Java源代码文件，3个为项目属性文件，1个为Markdown文档，以及1个JAR库文件。
第五章 堆积判弃电路和基线恢复器
最新发布
10-02
核电子学是一门交叉学科，它结合了电子技术与核辐射探测技术，是电子学的一个重要分支。这门学科的发展始于20世纪初，随着核物理学和粒子物理学的发展而逐渐成熟。核电子学的研究对象包括辐射探测器及其相应的电子电路或系统、核信息的电子学测量技术、配有在线电子计算机的核电子系统、电子器件在核辐射下的辐射效应以及核技术应用中的辐射探测技术和电子技术。 核电子学的发展历史可以追溯到1958年，当时在贝尔格莱德召开的第一次国际核电子学会议上，核电子学的名称被正式采用。从那时起，核电子学开始广泛应用于核物理和粒子物理实验，同时也在核医学、空间科学、移动通信和全球定位系统等领域发挥着重要作用。 核电子学的研究内容包括： 1. 辐射探测器及其信号处理技术。 2. 核信息的测量技术，包括时间间隔测量、空间分辨等。 3. 核电子系统的设计与应用，如在线电子计算机系统。 4. 电子器件和系统的抗辐射加固技术。 5. 核技术在不同领域的应用，如工业、农业、医学等。 核电子学的应用非常广泛，例如在医学领域，它可以帮助诊断和治疗疾病；在工业领域，它用于检测材料的完整性和质量；在环境监测中，它用于检测放射性物质。此外
南昌医学院在江西2020-2024各专业最低录取分数及位次表.pdf
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
兰州财经大学在江西2020-2024各专业最低录取分数及位次表.pdf
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
JavaScript中的BOM与DOM对象详解
"这篇介绍主要涉及BOM（Browser Object Model）和DOM（Document Object Model）在JavaScript中的应用，包括常见的BOM对象如window, document, location, navigator, screen, history等，以及DOM对象的引用方式。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值