js实现输入框的验证

最新推荐文章于 2024-03-26 21:24:35 发布

zeddme

最新推荐文章于 2024-03-26 21:24:35 发布

阅读量2k

点赞数

分类专栏： js 文章标签： js html css

本文链接：https://blog.csdn.net/qq_44888570/article/details/108941710

版权

js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

需求

输入6-16位的账号，当不符合的时候会提示，格式正确的时候会提示。输入框有默认值，获得焦点时会清空，且输入的字体颜色较默认值会变深。输入框失去焦点时，输入框中文字颜色会变浅。如果没有输入，失焦时便会显示默认值。

效果图

初始状态：
在这里插入图片描述
格式错误：

格式正确：
在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wapper {
            width: 400px;
            height: 100px;
            border: 1px pink solid;
            margin: 50px auto;
            padding: 20px;
        }

        input {
            color: #ccc;
            border: none;
            border-bottom: 1px solid pink;
            outline: none;
        }
    </style>
</head>
<body>
<div class="wapper">
    <input type="text" value="请输入帐号：">
    <span id="tex"></span>
    <img src="" alt="">
</div>
</body>
<script>
    var text = document.querySelector("input")
    var span = document.querySelector("#tex")
    var inital_v = text.value
    console.log(text.value.length)
    text.onfocus = function () {
        if (this.value == inital_v) {
            this.value = ''
        }
        this.style.color = '#000'
    }
    text.onblur = function () {
        if (this.value == '') {
            this.value = inital_v
        }
        this.style.color = '#ccc'
        if (this.value != inital_v) {
            if (this.value.length > 16 || this.value.length < 6) {
                span.innerHTML = '请输入6-16位数的帐号！'
                span.style.color = 'red'
            } else {
                span.innerHTML = '帐号格式正确！'
                span.style.color = 'green'
            }
        } else {
            span.innerHTML=''
        }

    }
</script>
</html>

总结

本例js部分基本都是dom操作，正确获取dom，添加或修改dom属性，修改dom文本内容即可。

zeddme

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js实现输入框的验证

需求输入6-16位的账号，当不符合的时候会提示，格式正确的时候会提示。输入框有默认值，获得焦点时会清空，且输入的字体颜色较默认值会变深。输入框失去焦点时，输入框中文字颜色会变浅。如果没有输入，失焦时便会显示默认值。效果图初始状态：格式错误：格式正确：源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</t
复制链接

扫一扫