实用的JS表单验证提示效果

　　errMsg 是一个错误消息的数组，这样方便自定义,errName是对应错误信息元件名数组，这样可以非富自定义显示方式，FormValid.allName记录了所有有验证规则的字段名数级，在自定义中可以使用到。

<!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> 
<title>表单验证提示效果</title> 
<style type="text/css"> 
body{ color:#666666; font-size:12px} 
h1{ font-size:20px;} 
input{ border:#999999 1px solid; background-color:#FFFFEE} 
.button2{ background-color:#FF9900; border-bottom:#E34A00 2px solid;border-right:#E34A00 2px solid; border-top:#FFB693 2px solid;border-left:#FFB693 2px solid; color:#FFFFFF; font-weight:bold} 
dl { 
font:normal 12px/15px Arial; 
position: relative; 
width: 350px; 
} 
dt { 
clear: both; 
float:left; 
width: 80px; 
padding: 4px 0 2px 0; 
text-align: left; 
} 
dd { 
float: left; 
width: 200px; 
margin: 0 0 8px 0; 
padding-left: 6px; 
}

.hint { 
display: none; 
position: absolute; 
right: -160px; 
width: 200px; 
margin-top: -4px; 
border: 1px solid #c93; 
padding: 10px 12px; 
background: #ffc url(/upload/2009-11/20091104144511488.gif) no-repeat -10px 5px; 
}

.hint .hint-pointer { 
position: absolute; 
left: -10px; 
top: 5px; 
width: 10px; 
height: 19px; 
background: url(/upload/2009-11/20091104144511488.gif) left top no-repeat; 
} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20FormValid%20%3D%20function(frm)%20%7B%20%0D%0Athis.frm%20%3D%20frm%3B%20%0D%0Athis.errMsg%20%3D%20new%20Array()%3B%20%0D%0A%20%20%20%20this.errName%20%3D%20new%20Array()%3B%20%0D%0A%0D%0Athis.required%20%3D%20function(inputObj)%20%7B%20%0D%0Aif%20(typeof(inputObj)%20%3D%3D%20%22undefined%22%20%7C%7C%20inputObj.value.trim()%20%3D%3D%20%22%22)%20%7B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%7D%20%0D%0A%0D%0Athis.eqaul%20%3D%20function(inputObj%2C%20formElements)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20fstObj%20%3D%20inputObj%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20sndObj%20%3D%20formElements%5BinputObj.getAttribute('eqaulName')%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0Aif%20(fstObj%20!%3D%20null%20%26%26%20sndObj%20!%3D%20null)%20%7B%20%0D%0Aif%20(fstObj.value%20!%3D%20sndObj.value)%20%7B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%7D%20%0D%0A%0D%0Athis.gt%20%3D%20function(inputObj%2C%20formElements)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20fstObj%20%3D%20inputObj%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20sndObj%20%3D%20formElements%5BinputObj.getAttribute('eqaulName')%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0Aif%20(fstObj%20!%3D%20null%20%26%26%20sndObj%20!%3D%20null%20%26%26%20fstObj.value.trim()!%3D''%20%26%26%20sndObj.value.trim()!%3D'')%20%7B%20%0D%0Aif%20(fstObj.value%20%3C%3D%20sndObj.value)%20%7B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%7D%20%0D%0A%0D%0A%20%20%20%20this.compare%20%3D%20function(inputObj%2C%20formElements)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20fstObj%20%3D%20inputObj%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20sndObj%20%3D%20formElements%5BinputObj.getAttribute('objectName')%5D%3B%20%0D%0Aif%20(fstObj%20!%3D%20null%20%26%26%20sndObj%20!%3D%20null%20%26%26%20fstObj.value.trim()!%3D''%20%26%26%20sndObj.value.trim()!%3D'')%20%7B%20%0D%0Aif%20(!eval('fstObj.value'%20%2B%20inputObj.getAttribute('operate')%20%2B%20'sndObj.value'))%20%7B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20this.limit%20%3D%20function%20(inputObj)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20len%20%3D%20inputObj.value.length%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(len)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20minv%20%3D%20inputObj.getAttribute('min')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20maxv%20%3D%20inputObj.getAttribute('max')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20minv%20%3D%20minv%20%7C%7C%200%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20maxv%20%3D%20maxv%20%7C%7C%20Number.MAX_VALUE%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20minv%20%3C%3D%20len%20%26%26%20len%20%3C%3D%20maxv%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20this.range%20%3D%20function%20(inputObj)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20val%20%3D%20parseInt(inputObj.value)%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(inputObj.value)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20minv%20%3D%20inputObj.getAttribute('min')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20maxv%20%3D%20inputObj.getAttribute('max')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20minv%20%3D%20minv%20%7C%7C%200%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20maxv%20%3D%20maxv%20%7C%7C%20Number.MAX_VALUE%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20minv%20%3C%3D%20val%20%26%26%20val%20%3C%3D%20maxv%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20this.requireChecked%20%3D%20function%20(inputObj)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20minv%20%3D%20inputObj.getAttribute('min')%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20maxv%20%3D%20inputObj.getAttribute('max')%3B%20%0D%0A%20%20%20%20%20%20%20%20minv%20%3D%20minv%20%7C%7C%201%3B%20%0D%0A%20%20%20%20%20%20%20%20maxv%20%3D%20maxv%20%7C%7C%20Number.MAX_VALUE%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20var%20checked%20%3D%200%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20groups%20%3D%20document.getElementsByName(inputObj.name)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Cgroups.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(groups%5Bi%5D.checked)%20checked%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20minv%20%3C%3D%20checked%20%26%26%20checked%20%3C%3D%20maxv%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20this.filter%20%3D%20function%20(inputObj)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20value%20%3D%20inputObj.value%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20allow%20%3D%20inputObj.getAttribute('allow')%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(value.trim())%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20new%20RegExp(%22%5E.%2B%5C.(%3F%3DEXT)(EXT)%24%22.replace(%2FEXT%2Fg%2C%20allow.split(%2F%5Cs*%2C%5Cs*%2F).join(%22%7C%22))%2C%20%22gi%22).test(value)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20this.isNo%20%3D%20function%20(inputObj)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20value%20%3D%20inputObj.value%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20noValue%20%3D%20inputObj.getAttribute('noValue')%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20value!%3DnoValue%3B%20%0D%0A%20%20%20%20%7D%20%0D%0Athis.checkReg%20%3D%20function(inputObj%2C%20reg%2C%20msg)%20%7B%20%0D%0AinputObj.value%20%3D%20inputObj.value.trim()%3B%20%0D%0A%0D%0Aif%20(inputObj.value%20%3D%3D%20'')%20%7B%20%0D%0Areturn%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Aif%20(!reg.test(inputObj.value))%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.addErrorMsg(inputObj.name%2Cmsg)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Athis.passed%20%3D%20function()%20%7B%20%0D%0Aif%20(this.errMsg.length%20%3E%200)%20%7B%20%0D%0AFormValid.showError(this.errMsg%2Cthis.errName)%3B%20%0D%0Afrt%20%3D%20document.getElementsByName(this.errName%5B0%5D)%5B0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(frt.type!%3D'radio'%20%26%26%20frt.type!%3D'checkbox')%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20frt.focus()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Areturn%20true%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Athis.addErrorMsg%20%3D%20function(name%2Cstr)%20%7B%20%0D%0Athis.errMsg.push(str)%3B%20%0D%0A%20%20%20%20%20%20%20%20this.errName.push(name)%3B%20%0D%0A%7D%20%0D%0A%20%20%20%20%20%0D%0Athis.addAllName%20%3D%20function(name)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20FormValid.allName.push(name)%3B%20%0D%0A%7D%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0AFormValid.allName%20%3D%20new%20Array()%3B%20%0D%0AFormValid.showError%20%3D%20function(errMsg)%20%7B%20%0D%0A%20%20%20%20var%20msg%20%3D%20%22%22%3B%20%0D%0A%20%20%20%20for%20(i%20%3D%200%3B%20i%20%3C%20errMsg.length%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20msg%20%2B%3D%20%22-%20%22%20%2B%20errMsg%5Bi%5D%20%2B%20%22%5Cn%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20alert(msg)%3B%20%0D%0A%7D%20%0D%0Afunction%20validator(frm)%20%7B%20%0D%0A%20%20%20%20var%20formElements%20%3D%20frm.elements%3B%20%0D%0A%20%20%20%20var%20fv%20%3D%20new%20FormValid(frm)%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20for%20(var%20i%3D0%3B%20i%3CformElements.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20validType%20%3D%20formElements%5Bi%5D.getAttribute('valid')%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20errorMsg%20%3D%20formElements%5Bi%5D.getAttribute('errmsg')%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(validType%3D%3Dnull)%20continue%3B%20%0D%0A%20%20%20%20%20%20%20%20fv.addAllName(formElements%5Bi%5D.name)%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20var%20vts%20%3D%20validType.split('%7C')%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20ems%20%3D%20errorMsg.split('%7C')%3B%20%0D%0A%20%20%20%20%20%20%20%20for%20(var%20j%3D0%3B%20j%3Cvts.length%3B%20j%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20curValidType%20%3D%20vts%5Bj%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20curErrorMsg%20%3D%20ems%5Bj%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20switch%20(curValidType)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isNumber'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isEmail'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isPhone'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isMobile'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isIdCard'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isMoney'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isZip'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isQQ'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isInt'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isEnglish'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isChinese'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isUrl'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isDate'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'isTime'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fv.checkReg(formElements%5Bi%5D%2CRegExps%5BcurValidType%5D%2CcurErrorMsg)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'regexp'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fv.checkReg(formElements%5Bi%5D%2Cnew%20RegExp(formElements%5Bi%5D.getAttribute('regexp')%2C%22g%22)%2CcurErrorMsg)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'custom'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(!eval(formElements%5Bi%5D.getAttribute('custom')%2B'(formElements%5Bi%5D%2CformElements)'))%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fv.addErrorMsg(formElements%5Bi%5D.name%2CcurErrorMsg)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20default%20%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(!eval('fv.'%2BcurValidType%2B'(formElements%5Bi%5D%2CformElements)'))%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fv.addErrorMsg(formElements%5Bi%5D.name%2CcurErrorMsg)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20fv.passed()%3B%20%0D%0A%7D%20%0D%0AString.prototype.trim%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20return%20this.replace(%2F%5E%5Cs*%7C%5Cs*%24%2Fg%2C%20%22%22)%3B%20%0D%0A%7D%20%0D%0Avar%20RegExps%20%3D%20function()%7B%7D%3B%20%0D%0ARegExps.isNumber%20%3D%20%2F%5E%5B-%5C%2B%5D%3F%5Cd%2B(%5C.%5Cd%2B)%3F%24%2F%3B%20%0D%0ARegExps.isEmail%20%3D%20%2F(%5B%5Cw-%5C.%5D%2B)%40((%5C%5B%5B0-9%5D%7B1%2C3%7D%5C.%5B0-9%5D%7B1%2C3%7D%5C.%5B0-9%5D%7B1%2C3%7D%5C.)%7C((%5B%5Cw-%5D%2B%5C.)%2B))(%5Ba-zA-Z%5D%7B2%2C4%7D%7C%5B0-9%5D%7B1%2C3%7D)(%5C%5D%3F)%2F%3B%20%0D%0ARegExps.isPhone%20%3D%20%2F%5E((%5C(%5Cd%7B2%2C3%7D%5C))%7C(%5Cd%7B3%7D%5C-))%3F(%5C(0%5Cd%7B2%2C3%7D%5C)%7C0%5Cd%7B2%2C3%7D-)%3F%5B1-9%5D%5Cd%7B6%2C7%7D(%5C-%5Cd%7B1%2C4%7D)%3F%24%2F%3B%20%0D%0ARegExps.isMobile%20%3D%20%2F%5E((%5C(%5Cd%7B2%2C3%7D%5C))%7C(%5Cd%7B3%7D%5C-))%3F13%5Cd%7B9%7D%24%2F%3B%20%0D%0ARegExps.isIdCard%20%3D%20%2F(%5E%5Cd%7B15%7D%24)%7C(%5E%5Cd%7B17%7D%5B0-9Xx%5D%24)%2F%3B%20%0D%0ARegExps.isMoney%20%3D%20%2F%5E%5Cd%2B(%5C.%5Cd%2B)%3F%24%2F%3B%20%0D%0ARegExps.isZip%20%3D%20%2F%5E%5B1-9%5D%5Cd%7B5%7D%24%2F%3B%20%0D%0ARegExps.isQQ%20%3D%20%2F%5E%5B1-9%5D%5Cd%7B4%2C10%7D%24%2F%3B%20%0D%0ARegExps.isInt%20%3D%20%2F%5E%5B-%5C%2B%5D%3F%5Cd%2B%24%2F%3B%20%0D%0ARegExps.isEnglish%20%3D%20%2F%5E%5BA-Za-z%5D%2B%24%2F%3B%20%0D%0ARegExps.isChinese%20%3D%20%2F%5E%5B%5Cu0391-%5CuFFE5%5D%2B%24%2F%3B%20%0D%0ARegExps.isUrl%20%3D%20%2F%5Ehttp%3A%5C%2F%5C%2F%5BA-Za-z0-9%5D%2B%5C.%5BA-Za-z0-9%5D%2B%5B%5C%2F%3D%5C%3F%25%5C-%26_~%60%40%5B%5C%5D%5C'%3A%2B!%5D*(%5B%5E%3C%3E%5C%22%5C%22%5D)*%24%2F%3B%20%0D%0ARegExps.isDate%20%3D%20%2F%5E%5Cd%7B4%7D-%5Cd%7B1%2C2%7D-%5Cd%7B1%2C2%7D%24%2F%3B%20%0D%0ARegExps.isTime%20%3D%20%2F%5E%5Cd%7B4%7D-%5Cd%7B1%2C2%7D-%5Cd%7B1%2C2%7D%5Cs%5Cd%7B1%2C2%7D%3A%5Cd%7B1%2C2%7D%3A%5Cd%7B1%2C2%7D%24%2F%3B%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20addLoadEvent(func)%20%7B%20%0D%0Avar%20oldonload%20%3D%20window.onload%3B%20%0D%0Aif%20(typeof%20window.onload%20!%3D%20'function')%20%7B%20%0D%0Awindow.onload%20%3D%20func%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Awindow.onload%20%3D%20function()%20%7B%20%0D%0Aoldonload()%3B%20%0D%0Afunc()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20prepareInputsForHints()%20%7B%20%0D%0A%20%20%20%20var%20inputs%20%3D%20document.getElementsByTagName(%22input%22)%3B%20%0D%0A%20%20%20%20for%20(var%20i%3D0%3B%20i%3Cinputs.length%3B%20i%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20test%20to%20see%20if%20the%20hint%20span%20exists%20first%20%0D%0A%20%20%20%20%20%20%20%20if%20(inputs%5Bi%5D.parentNode.getElementsByTagName(%22span%22)%5B0%5D)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20the%20span%20exists!%20on%20focus%2C%20show%20the%20hint%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20inputs%5Bi%5D.onfocus%20%3D%20function%20()%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.parentNode.getElementsByTagName(%22span%22)%5B0%5D.style.display%20%3D%20%22inline%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20when%20the%20cursor%20moves%20away%20from%20the%20field%2C%20hide%20the%20hint%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20inputs%5Bi%5D.onblur%20%3D%20function%20()%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.parentNode.getElementsByTagName(%22span%22)%5B0%5D.style.display%20%3D%20%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%2F%2F%20repeat%20the%20same%20tests%20as%20above%20for%20selects%20%0D%0A%20%20%20%20var%20selects%20%3D%20document.getElementsByTagName(%22select%22)%3B%20%0D%0A%20%20%20%20for%20(var%20k%3D0%3B%20k%3Cselects.length%3B%20k%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(selects%5Bk%5D.parentNode.getElementsByTagName(%22span%22)%5B0%5D)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20selects%5Bk%5D.onfocus%20%3D%20function%20()%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.parentNode.getElementsByTagName(%22span%22)%5B0%5D.style.display%20%3D%20%22inline%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20selects%5Bk%5D.onblur%20%3D%20function%20()%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.parentNode.getElementsByTagName(%22span%22)%5B0%5D.style.display%20%3D%20%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0AaddLoadEvent(prepareInputsForHints)%3B%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0AFormValid.showError%20%3D%20function(errMsg%2CerrName)%20%7B%20%0D%0A%20%20%20%20for%20(key%20in%20FormValid.allName)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20document.getElementById('errMsg_'%2BFormValid.allName%5Bkey%5D).innerHTML%20%3D%20''%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20for%20(key%20in%20errMsg)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20document.getElementById('errMsg_'%2BerrName%5Bkey%5D).innerHTML%20%3D%20errMsg%5Bkey%5D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

</head> 
<body> 
<h1>表单验证提示效果</h1> 
<form action="" method="post" onsubmit="return validator(this)"> 
<dl> 
    <dt><label for="name">帐号:</label></dt> 
    <dd><input name="name" id="name"type="text" valid="required" errmsg="用户名不能为空!" /> 
    <span class="hint" id="errMsg_name">注册帐号（只支持数字和字母,如:love,love520）<span class="hint-pointer"></span></span>    </dd> 
     
    <dt><label for="password">密码：</label></dt> 
    <dd><input name="password" id="password" type="password" valid="required" errmsg="密码不能为空!" /> 
    <span class="hint" id="errMsg_password">请输入密码,请最少输入最少6位最多12位密码<span class="hint-pointer"> </span></span>    </dd> 
     
    <dt><label for="password2">确认密码：</label></dt> 
    <dd> 
    <input name="password2" id="password2"　type="text" type="password" valid="eqaul" eqaulName="password" errmsg="两次密码不同!" /> 
    <span class="hint" id="errMsg_password2">请再输入一次上面的密码<span class="hint-pointer"></span></span>    </dd> 
     
    <dt><label for="email">邮箱:</label></dt> 
    <dd><input name="email" id="email"type="text" valid="required|isEmail" errmsg="Email不能为空|Email格式不对!"/> 
    <span class="hint" id="errMsg_email">请输入邮箱(Email),推荐使用网易邮箱@163.com<span class="hint-pointer"></span></span>    </dd> 
     
    <dt><label for="year">生日:</label></dt> 
    <dd><select id="year" name="year"> 
            <option value="1983">1983</option> 
            <option value="1984">1984</option> 
            <option value="1985">1985</option> 
        </select>年<select name="m" id="m"> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="12">12</option> 
</select>月<select name="d" id="d"> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="12">12</option> 
</select>日<span class="hint">请输入你的生日<span class="hint-pointer"></span></span> 
    </dd> 
    <dt><label for="qq">QQ/MSN:</label></dt> 
    <dd><input name="qq" id="qq" type="text" valid="required" errmsg="没有填写QQ或MSN"/> 
    <span class="hint" id="errMsg_qq">请输入你的QQ或MSN号码<span class="hint-pointer"></span></span>    </dd> 
    <dt><label for="tel">电话:</label></dt> 
    <dd><input name="tel" id="tel" type="text" valid="required|isMobile" errmsg="手机不能为空|手机格式不对!" /> 
    <span class="hint" id="errMsg_tel">请输入你的电话<span class="hint-pointer"></span></span>    </dd> 
    <dt class="button"></dt> 
    <dd class="button"><input type="submit" name="Submit" value=" 提 交 " class="button2"/></dd> 
</dl> 
</form> 
</p> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程