表单验证，自定义表单控件

看了下妙味课堂的视频，跟着我也做了一个自定义表单控件

妙味课堂的视频讲解地址：http://player.youku.com/player.php/sid/XMjgyNDc1Njg0/v.swf

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义表单控件</title>
<style>
*{ font-size:12px;}
dl{ display:inline-block; border:2px solid #ccc; border-radius:8px; background:#f1f1f1; padding:10px;}
dl dt{ padding:10px; font-size:18px;}
dl dd{ padding:5px;}
.txt{ border:0px; width:230px; vertical-align:middle; border:1px solid #FC9; padding:8px 10px; border-radius:5px; color:#999}
.select-div-box{ padding-right:40px; background:#FC9; display:inline-block;}
.select-ul-box{ margin:0px; padding:0px; list-style:none; width:250px; background:#FFF; border:1px solid #FC9; overflow:hidden; display:none;}
.select-ul-box li{ float:left; display:inline; width:50%; text-align:center; line-height:24px; cursor:pointer;}
.select-ul-box .cur{ background:#FC0; color:#fff;}
.msg{ color:red; padding-left:10px;}
</style>
<script>
function getByClass(oParent,sClass){
var ale = oParent.getElementsByTagName("*");
var result = [];
var re = new RegExp('\\s*'+sClass+'\\s*','i');
for(var i=0; i<ale.length; i++){
if(re.test(ale[i].className)){
result.push(ale[i]);
}
}
return result;
}
window.onload = function (){
var oDL = document.getElementById("oDL");
var txt = getByClass(oDL,'txt');
var innerText = ['江湖称号','联络方式','所习技能','师出何派'];
var msgText = ['请输入您的称号！','请留下您的联络暗号！','告知天下您的绝技！','光大您的师门！'];
for(var i=0; i<txt.length; i++){
getTxt(txt[i],innerText[i]);
}
/////////////////////////
var selectDivBox = document.getElementById("selectDivBox");
var teacher = document.getElementById("teacher");
var selectUlBox = document.getElementById("selectUlBox");
var lis = selectUlBox.getElementsByTagName("li");
selectDivBox.onclick = function(ev){
selectUlBox.style.display = "block";
for(var i=0; i<lis.length; i++){
if(lis[i].innerHTML == teacher.value){
lis[i].className = "cur";
}else{
lis[i].className = "";
}
}
(ev||event).cancelBubble = true;
}
for(var i=0; i<lis.length; i++){
lis[i].onmouseover = function(){
this.className = "cur";
}
lis[i].onmouseout = function(){
this.className = "";
}
lis[i].onclick = function(){
teacher.value = this.innerHTML;
selectUlBox.style.display = "none";
}
}

document.onclick = function(){
selectUlBox.style.display = "none";
}
}

</script>
</head>

<body>

</body>
</html>

表单验证，自定义表单控件

公告