龙空技术网

表单验证实例

Python程序员涵涵 109

前言:

此时大家对“表单验证代码”大概比较看重,大家都需要知道一些“表单验证代码”的相关知识。那么小编在网摘上汇集了一些有关“表单验证代码””的相关知识,希望我们能喜欢,朋友们一起来学习一下吧!

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

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

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

标签: #表单验证代码