WebAPI 操作元素案例 —— 密码框格式提示错误信息

最新推荐文章于 2022-03-30 16:55:03 发布

没人回复我哼

最新推荐文章于 2022-03-30 16:55:03 发布

阅读量446

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/105560061

版权

本文介绍了一个使用JavaScript实现的WebAPI操作，当用户在密码框中输入长度不在6~16位时，显示错误提示信息，输入正确则显示成功提示，通过改变className动态调整样式。

摘要由CSDN通过智能技术生成

学习来源：https://www.bilibili.com/video/BV1HJ41147DG

要求
用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息
在这里插入图片描述

思路
首先判断的事件是表单失去焦点 onblur
如果输入正确则提示正确的信息颜色为蓝色小图标变化
如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
因为里面变化样式较多，所以采取className修改样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
   
            /* 清除内边距、外边距 */
            margin: 0;
            padding: 0;
        }

        img {

最低0.47元/天解锁文章

没人回复我哼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebAPI 操作元素案例 —— 密码框格式提示错误信息

学习来源：https://www.bilibili.com/video/BV1HJ41147DG 要求用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息思路首先判断的事件是表单失去焦点 onblur 如果输入正确则提示正确的信息颜色为蓝色小图标变化如果输入不是6到16位，则提示错误信息颜色为红色小图标变化因为里面变化样式较多，所以...
复制链接

扫一扫