表单验证实例（表单验证两种方式）

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

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

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

下面是案例的一个片段

$('one').onblur = function() {
    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';
	}
 }

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