表单验证实例

    这几天写了一个登录表单验证，因为还没有学过正则表达式，所以暂时先用普通的逻辑实现。可能代码稍微会多一点。先上预览图。

    这是在百度上找的模板然后自己尝试写前端的代码。说起来，表单还是js最原始的应用。在写这个表单的时候主要是用到了input中的onblur事件和onfoucs事件。

onblur事件：焦点移除时发生的事情。

$('one').onblur = () => {
    var value = this.value;
    // console.log(value);
    if(value.length >= 2 && value.length <= 6) {
        success('one');
        jump_one = true;
    }else if(value.length == 0){
        alert('用户名不能为空')
        this.style.borderColor = 'red';
        clearIt('one');
    }else {
        alert('用户名非法')
        this.style.borderColor = 'red';
        clearIt('one');
    }
}

这里用了一些简单的封装来练习，也算是解决了一直没搞明白的函数传参的问题。

onfoucs事件：焦点重新聚焦时发生的事件。

写案例的时候我是把它封装起来使用的。

function clearIt(e) {
	$(e).onfocus = function() {       
		this.value = ' ';
		this.style.borderColor = '#fff';
	}
 }

    这是两个很简单但是在实践中很常用的事件调用。下面是案例的源代码，有兴趣的小伙伴可以看看，因为本人初学编程不久，写博客也是第一次，如果有问题可以在下方评论，笔者会认真的回复和改进。

源码查看