实例演示classList对象,blur事件进行表单非空验证

实例演示classList对象

html代码

<div class="box">实例演示classList对象
> html代码</div>
    <script>
        const box = document.querySelector('.box');
        // add(): 添加
        box.classList.add('on');
        // contains(): 判断
        console.log(box.classList.contains('on'));
        // remove()移除
        box.classList.remove('on');
        // replace(): 替换
        box.classList.replace('on', 'curr');
        // toggle(): 动态切换class
        box.classList.toggle('bgcolor');
    </script>

blur事件进行表单非空验证

js代码

<script>
        document.forms.login.email.onblur = function () {
            if (this.value.length === 0) {
                alert('邮箱不能为空');
                return false;
            }
        };
        document.forms.login.password.onblur = function () {
            if (this.value.length === 0) {
                alert('密码不能为空！');
                return false;
            }
        };
    </script>