js表单验证_表单验证实例

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

这是在百度上找的模板然后自己尝试写前端的代码。说起来，表单还是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';} }

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