表单控件验证

今天学习了表单控件的验证，是通过js实现的，用到了onblur和onfocus两个事件，

前者是事件会在对象失去焦点时发生，后者是事件在对象获得焦点时发生。

先在网页中创建一个表单在这个表单中创建一个<div>这个<div>中包含两个<div>一个是提示信息一个是文本输入框。

代码如下：

<form action="" method="post">
<div style="width: 150px;">
<div style="color:red; visibility: hidden;" id="userIdInfo">提示信息</div>
<div><input type="text" placeholder="请输入用户名" οnblur="elemgetfocus(this)" οnfοcus="elemgetblur(this)"></div>
</div>
</form>

在js中写入两个方法

function elemgetfocus(elem) {
var elemValue = elem.value;
var borderColor = elem.style.borderColor;
var userIdInfo = document.getElementById('userIdInfo');
if (elemValue == "") {
userIdInfo.innerHTML = "请输入用户名";
elem.style.borderColor = "red";
userIdInfo.style.visibility = "visible";
}else if (borderColor=="red") {
elem.style.borderColor = "";
userIdInfo.style.visibility = "hidden";
}
}

和function elemgetblur(elem) {
var borderColor = elem.style.borderColor;
var userIdInfo = document.getElementById('userIdInfo');
if (borderColor=="red") {
elem.style.borderColor= "";
userIdInfo.style.visibility = "hidden";
}
}

这样就实现了表单的控件检查。