ErrMsg is an array of error messages, so it is convenient to customize, Errname is the corresponding error message component array group, which can be not rich custom display, Formvalid.allname records all the validation rules of the number of field names, in the custom can be used.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> form verification prompt effect </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> <script language= "JavaScript" type= "Text/javascript" > var formvalid = function (frm) {this.frm = frm; this.errmsg = new Array (); This.errname = new Array (); this.required = function (inputobj) {if typeof (inputobj) = = "Undefined" | | InputObj.value.trim () = "") {return false; return true; } This.eqaul = function (Inputobj, formelements) {var fstobj = inputobj; var sndobj = Formelements[inputobj.getattribute (' Eqaulname ')]; if (fstobj!= null && sndobj!= null) {if (Fstobj.value!= sndobj.value) {return false; } return true; } this.gt = function (Inputobj, formelements) {var fstobj = inputobj; var sndobj = Formelements[inputobj.getattribute (' Eqaulname ')]; if (fstobj!= null && sndobj!= null && fstObj.value.trim ()!= ' && SndObj.value.trim ()!= ') {if (Fstobj.value <= Sndobj.value) {return false; } return true; } This.compare = function (Inputobj, formelements) {var fstobj = inputobj; var sndobj = formelements[inputobj.getattribute (' objectname ')]; if (fstobj!= null && sndobj!= null && fstObj.value.trim ()!= ' && SndObj.value.trim ()!= ') {if (!eval (' Fstobj.value ' + inputobj.getattribute (' operate ') + ' sndobj.value ')) {return false; } return true; } this.limit = function (inputobj) {var len = inputObj.value.length; if (len) {var minv = inputobj.getattribute (' min '); var maxv = inputobj.getattribute (' Max '); MINV = MINV | | 0; MAXV = MAXV | | Number.MAX_VALUE; return MINV <= len && len <= maxv; return true; } This.range = function (inputobj) {var val = parseint (Inputobj.value); if (inputobj.value) {var minv = inputobj.getattribute (' min '); var maxv = inputobj.getattribute (' Max '); MINV = MINV | | 0; MAXV = MAXV | | Number.MAX_VALUE; Return Minv <= Val && val <= maxv; return true; } this.requirechecked = function (inputobj) {var minv = inputobj.getattribute (' min '); var maxv = inputobj.getattribute (' Max '); MINV = MINV | | 1; MAXV = MAXV | | Number.MAX_VALUE; var checked = 0; var groups = Document.getelementsbyname (inputobj.name); for (Var i=0;i<groups.length;i++) {if (groups[i].checked) checked++; Return MINV <= checked && checked <= maxv; } this.filter = function (inputobj) {var value = Inputobj.value; var allow = Inputobj.getattribute (' Allow '); if (Value.trim ()) {return new RegExp ("^.+\. =ext) (EXT) $ ". Replace (/ext/g, Allow.split (/\s*,\s*/). Join (" | "))," GI "). Test (value); return true; } This.isno = function (inputobj) {var value = Inputobj.value; var novalue = Inputobj.getattribute (' Novalue '); return value!=novalue; } This.checkreg = function (Inputobj, Reg, msg) {Inputobj.value = InputObj.value.trim (); if (Inputobj.value = = ") {return; } else {if (!reg.test (Inputobj.value)) {this.adderrormsg (inputobj.name,msg); }} this.passed = function () {if (This.errMsg.length > 0) {formvalid.showerror (this.errmsg,this.errname); FRT = Document.getelementsbyname (this.errname[0]) [0]; if (frt.type!= ' Radio ' && frt.type!= ' checkbox ') {FRT.focus (); return false; else {return true; } this.adderrormsg = function (name,str) {this.errMsg.push (str); This.errName.push (name); } this.addallname = function (name) {FormValid.allName.push (name); } formvalid.allname = new Array (); Formvalid.showerror = function (errmsg) {var msg = ""; for (i = 0; i < errmsg.length i++) {msg = "-" + errmsg[i] + "\ n"; Alert (msg); Function Validator (frm) {var formelements = frm.elements; var fv = new Formvalid (frm); for (var i=0 i<formelements.length;i++) {var validtype = formelements[i].getattribute (' valid '); var errormsg = Formelements[i].getattribute (' errmsg '); if (validtype==null) continue; Fv.addallname (Formelements[i].name); var VTS = validtype.split (' | '); var ems = errormsg.split (' | '); for (Var j=0 j<vts.length; J + +) {var CurvaliDtype = Vts[j]; var curerrormsg = ems[j]; Switch (curvalidtype) {case ' isnumber ': Case ' isemail ': Case ' isphone ': Case ' ismobile ': Case ' isidcard ': Case ' Ismoney ': Case ' iszip ': CAs E ' isqq ': Case ' isint ': Case ' isenglish ': Case ' Ischinese ': Case ' Isur L ': Case ' isDate ': Case ' istime ': Fv.checkreg (Formelements[i],regexps[curvalidt YPE],CURERRORMSG); Break Case ' regexp ': Fv.checkreg (formelements[i],new regexp (Formelements[i].getattribute (' regexp '), "G"), Curerro RMSG); Break Case ' Custom ': if (!eval (Formelements[i].getattribute (' custom ') + ' (formelements[i],formelements) ')) { Fv.adderrormsg (FORMELEMENTS[I].NAME,CURERRORMSG); } Break Default:if (!eval) (' FV. ' +curvalidtype+ ' (formelements[i],formelements))) {fv.adderrormsg (formelements[i].name,curerrormsg); } break; }} return fv.passed (); } String.prototype.trim = function () {return this.replace (/^\s*|\s*$/g, ""); var regexps = function () {}; Regexps.isnumber =/^[-\+]?\d+ (\.\d+)? $/; Regexps.isemail =/([\w-\.] +) @ (\[[0-9]{1,3}\. [0-9] {1,3}\. [0-9] {1,3}\.) | (([\w-]+\.) +)) ([a-za-z]{2,4}| [0-9] {1,3}) (\]?) /; Regexps.isphone =/^ ((\d{2,3}\)) | ( \d{3}\-))? (\ (0\d{2,3}\) |0\d{2,3}-)? [1-9]\d{6,7} (\-\d{1,4})? $/; Regexps.ismobile =/^ ((\d{2,3}\)) | ( \d{3}\-))? 13\d{9}$/; Regexps.isidcard =/(^\d{15}$) | (^\d{17}[0-9xx]$)/; Regexps.ismoney =/^\d+ (\.\d+)? $/; Regexps.iszip =/^[1-9]\d{5}$/; REGEXPS.ISQQ =/^[1-9]\d{4,10}$/; Regexps.isint =/^[-\+]?\d+$/; Regexps.isenglish =/^[a-za-z]+$/; Regexps.ischinese =/^[\u0391-\uffe5]+$/; Regexps.isurl =/^http:\/\/[a-za-z0-9]+\. [a-za-z0-9]+[\/=\?%\ -&_~ ' @[\]\ ': +!] * ([^<>\ "\"]) *$/; Regexps.isdate =/^\d{4}-\d{1,2}-\d{1,2}$/; Regexps.istime =/^\d{4}-\d{1,2}-\d{1,2}\s\d{1,2}:\d{1,2}:\d{1,2}$/; </script> <script type= "Text/javascript" > Function Addloadevent (func) {var oldonload = window.onload; if (typeof window.onload!= ' function ') {window.onload = func; else {window.onload = function () {oldonload (); Func (); }} function Prepareinputsforhints () {var inputs = document.getElementsByTagName ("input"); For (Var i=0. i<inputs.length; i++) {//test to-if the hint span exists-a-if (Inputs[i].paren Tnode.getelementsbytagname ("span") [0]) {//The span exists! on focus and show the hint INPUTS[I].O Nfocus = function () {This.parentNode.getElementsByTagName ("span") [0].style.display = "inline"; }//When the cursor moves away From the field, hide the hint Inputs[i].onblur = function () {This.parentNode.getElementsB Ytagname ("span") [0].style.display = "none"; }}//Repeat the same tests as above for selects var selects = document.getElementsByTagName ("s Elect "); for (var k=0; k<selects.length; k++) {if (Selects[k].parentnode.getelementsbytagname ("span") [0]) { Selects[k].onfocus = function () {This.parentNode.getElementsByTagName ("span") [0].style.display = "inl Ine "; } Selects[k].onblur = function () {This.parentNode.getElementsByTagName ("span") [0].style.di Splay = "None"; }}} addloadevent (prepareinputsforhints); </script> <script type= "Text/javascript" > formvalid.showerror = function (errmsg,errname) {for (key) Formvalid.allname) {document.getElementById (' errmsg_ ' +formvalid.allname[key]). InnerHTML = '; For (key in errmsg) {document.getElementById (' errmsg_ ' +errname[key]). InnerHTML = Errmsg[key]; } </script> </pead> <body> <p> form validation prompt effect </p> <form action= "" method= "POST" onsub Mit= "return Validator (This)" > <dl> <dt><label for= "name" > Account:</label></dt> < Dd><input name= "name" id= "name" type= "text" valid= "required" errmsg= "username cannot be empty!"/> <span class= "hint" id= "E Rrmsg_name "> Registration account (only numbers and letters are supported, such as: love,love520) <span class=" Hint-pointer "></span></span> </dd > <dt><label for= "password" > Password:</label></dt> <dd><input name= "password "id=" password "type=" password "valid=" required "errmsg=" password cannot be null! "/> <span class=" hint "id=" Errmsg_password " Enter a password, please enter at least 6-digit maximum 12-bit password <span class= "Hint-pointer" > </span></span> </dd> <DT>&L T;label for= "pasSword2 > Confirm Password:</label></dt> <dd> <input name= "Password2" id= "Password2" type= "text" type= "Password" valid= "eqaul" eqaulname= "password" errmsg= "two times password different!"/> <span class= "hint" id= "Errmsg_password2" > Please Enter the password above again <span class= "Hint-pointer" ></span></span> </dd> <dt><label for= "E Mail "> Mailbox:</label></dt> <dd><input name=" email "id=" email "type=" text "valid=" required| Isemail "errmsg=" email cannot be empty | Wrong email format! " /> <span class= "hint" id= "Errmsg_email" > Please enter your email (email), recommended to use NetEase mailbox @163.com<span class= "Hint-pointer" > </span></span> </dd> <dt><label for= "Year" > Birthday:</label></dt> & Lt;dd><select id= "Year" name= "year" > <option value= "1983" >1983</option> ; option Value= "1984" >1984</option> <option value= "1985" >1985</option> </seleCt> year <select name= "M" id= "M" > <option value= "5" >5</option> <option value= "6" >6</o ption> <option value= "7" >7</option> <option value= "" >12</option> </select> Month <select name= "D" id= "D" > <option value= "5" >5</option> <option value= "6" >6</option& Gt <option value= "7" >7</option> <option value= "a" >12</option> </select> day <span class= "Hint" > Please enter your birthday <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= "Do not fill in QQ or MSN"/> <span class= "hint" id= "ERRMSG_QQ" > Please enter your QQ or MSN number <span class= "Hint-pointer" ></span& gt;</span> </dd> <dt><label for= "TEL" > Telephone:</label></dt> <dd><inpu T name= "tel" id= "tEl "type=" text "valid=" Required|ismobile "errmsg=" mobile phone can not be empty | The phone format is not right! "/> <span class=" hint "id=" Errmsg_tel "> Please enter your Phone <span class= "Hint-pointer" ></span></span> </dd> <dt class= "button" ></dt> <dd class= "button" ><input type= "Submit" name= "Submit" value= "submitted" class= "Button2"/></dd> </DL&G T </form> </p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
