JavaScript - 用户名表单验证

最新推荐文章于 2023-11-08 16:24:10 发布

原创

最新推荐文章于 2023-11-08 16:24:10 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #ecmascript #css

本文介绍了如何使用JavaScript进行用户名表单验证，包括HTML结构、CSS样式和JavaScript代码实现，确保用户输入的用户名符合特定规范。

效果

代码

html：

    <input type="text" class="uname">
    <span>请输入用户名</span>
    <div class="hint"></div>

css：

        label {
            color: #ccc;
        }

        .right {
            color: green;
        }

        .wrong {
            color: red;
        }

javascript

 var uname = document.querySelector('.uname');
        var span = document.querySelector('span');
        // 正则表达式，可以输入6到16位的 a-z A-Z 0-9 或下划线_和分隔符 - 
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;  

        //如果用户名输完了（失焦），则让它加一个right类，颜色变绿
        //修改span里的文字
        uname.addEventListener('blur', function () {
            if (reg.test(this.value)) {
                span.className = 'r