资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
DHTML form validation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <title>DHTML form validation</title> <meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)"> <meta name="KeyWords" content="DHTML, HTML, Dynamic HTML,CSS, Menu, Menus,Drag and drop, Drag, Drop, Cross-browser, Cross browser, Examples, Javascript, Free, Javascripts, Cascading Style Sheet, Crossbrowser,Alf Magne Kalleland, Batalf, minesweeper"> <meta name="robots" content="follow"> <meta name="googlebot" content="index, follow"> <head> <style type="text/css"> body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */ background-color:#FFF; font-size:0.9em; } /* Style for invalid input */ .invalidInput{ border:1px solid #F00; padding:1px; } /* Style for valid input */ .validInput{ border:1px solid #FFF; padding:1px; } </style> <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%0A%2F************************************************************************************************************%20%0D%0A(C)%20www.dhtmlgoodies.com%2C%20February%202006%20%0D%0A%0D%0AThis%20is%20a%20script%20from%20www.dhtmlgoodies.com.%20You%20will%20find%20this%20and%20a%20lot%20of%20other%20scripts%20at%20our%20website.%20%20%20%0D%0A%0D%0ATerms%20of%20use%3A%20%0D%0AYou%20are%20free%20to%20use%20this%20script%20as%20long%20as%20the%20copyright%20message%20is%20kept%20intact.%20However%2C%20you%20may%20not%20%0D%0Aredistribute%2C%20sell%20or%20repost%20it%20without%20our%20permission.%20%0D%0A%0D%0AThank%20you!%20%0D%0A%0D%0Awww.dhtmlgoodies.com%20%0D%0AAlf%20Magne%20Kalleland%20%0D%0A%0D%0A************************************************************************************************************%2F%20%20%20%0D%0A%20%20%20%0D%0A%2F%2F%20Patterns%20%0D%0Avar%20formValidationMasks%20%3D%20new%20Array()%3B%20%0D%0AformValidationMasks%5B'email'%5D%20%3D%20%2F%5Cb%5BA-Z0-9._%25-%5D%2B%40%5BA-Z0-9.-%5D%2B%5C.%5BA-Z%5D%7B2%2C4%7D%5Cb%2Fgi%3B%20%20%2F%2F%20Email%20%0D%0AformValidationMasks%5B'numeric'%5D%20%3D%20%2F%5E%5B0-9%5D%2B%24%2Fgi%3B%20%20%2F%2F%20Numeric%20%0D%0AformValidationMasks%5B'zip'%5D%20%3D%20%2F%5E%5B0-9%5D%7B5%7D%5C-%5B0-9%5D%7B4%7D%24%2Fgi%3B%20%20%2F%2F%20Numeric%20%0D%0A%0D%0Avar%20formElementArray%20%3D%20new%20Array()%3B%20%0D%0A%0D%0Afunction%20validateInput(e%2CinputObj)%20%0D%0A%7B%20%0D%0A%20%20if(!inputObj)inputObj%20%3D%20this%3B%20%20%20%20%20%0D%0A%20%20var%20inputValidates%20%3D%20true%3B%20%0D%0A%20%20%20%0D%0A%20%20if(formElementArray%5BinputObj.name%5D%5B'required'%5D%20%26%26%20inputObj.tagName%3D%3D'INPUT'%20%26%26%20inputObj.value.length%3D%3D0)inputValidates%20%3D%20false%3B%20%0D%0A%20%20if(formElementArray%5BinputObj.name%5D%5B'required'%5D%20%26%26%20inputObj.tagName%3D%3D'SELECT'%20%26%26%20inputObj.selectedIndex%3D%3D0)%7B%20%0D%0A%20%20%20%20inputValidates%20%3D%20false%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20if(formElementArray%5BinputObj.name%5D%5B'mask'%5D%20%26%26%20!inputObj.value.match(formValidationMasks%5BformElementArray%5BinputObj.name%5D%5B'mask'%5D%5D))inputValidates%20%3D%20false%3B%20%0D%0A%0D%0A%20%20if(formElementArray%5BinputObj.name%5D%5B'freemask'%5D)%7B%20%0D%0A%20%20%20%20var%20tmpMask%20%3D%20formElementArray%5BinputObj.name%5D%5B'freemask'%5D%3B%20%0D%0A%20%20%20%20tmpMask%20%3D%20tmpMask.replace(%2F-%2Fg%2C'%5C%5C-')%3B%20%0D%0A%20%20%20%20tmpMask%20%3D%20tmpMask.replace(%2FS%2Fg%2C'%5BA-Z%5D')%3B%20%0D%0A%20%20%20%20tmpMask%20%3D%20tmpMask.replace(%2FN%2Fg%2C'%5B0-9%5D')%3B%20%0D%0A%20%20%20%20tmpMask%20%3D%20eval(%22%2F%5E%22%20%2B%20tmpMask%20%2B%20%22%24%2Fgi%22)%3B%20%0D%0A%20%20%20%20if(!inputObj.value.match(tmpMask))inputValidates%20%3D%20false%20%0D%0A%20%20%7D%20%20%20%0D%0A%20%20%20%0D%0A%20%20if(formElementArray%5BinputObj.name%5D%5B'regexpPattern'%5D)%7B%20%0D%0A%20%20%20%20var%20tmpMask%20%3D%20eval(formElementArray%5BinputObj.name%5D%5B'regexpPattern'%5D)%3B%20%0D%0A%20%20%20%20if(!inputObj.value.match(tmpMask))inputValidates%20%3D%20false%20%0D%0A%20%20%7D%20%0D%0A%20%20if(!formElementArray%5BinputObj.name%5D%5B'required'%5D%20%26%26%20inputObj.value.length%3D%3D0%20%26%26%20inputObj.tagName%3D%3D'INPUT')inputValidates%20%3D%20true%3B%20%0D%0A%20%20%20%0D%0A%20%20%20%0D%0A%20%20if(inputValidates)%7B%20%0D%0A%20%20%20%20inputObj.parentNode.className%3D'validInput'%3B%20%0D%0A%20%20%7Delse%7B%20%0D%0A%20%20%20%20inputObj.parentNode.className%3D'invalidInput'%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20isFormValid()%20%0D%0A%7B%20%0D%0A%20%20var%20divs%20%3D%20document.getElementsByTagName('DIV')%3B%20%0D%0A%20%20for(var%20no%3D0%3Bno%3Cdivs.length%3Bno%2B%2B)%7B%20%0D%0A%20%20%20%20if(divs%5Bno%5D.className%3D%3D'invalidInput')return%20false%3B%20%0D%0A%20%20%7D%20%0D%0A%20%20return%20true%3B%20%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20initFormValidation()%20%0D%0A%7B%20%0D%0A%20%20var%20inputFields%20%3D%20document.getElementsByTagName('INPUT')%3B%20%0D%0A%20%20var%20selectBoxes%20%3D%20document.getElementsByTagName('SELECT')%3B%20%0D%0A%20%20%20%0D%0A%20%20var%20inputs%20%3D%20new%20Array()%3B%20%0D%0A%20%20%20%0D%0A%20%20%20%0D%0A%20%20for(var%20no%3D0%3Bno%3CinputFields.length%3Bno%2B%2B)%7B%20%0D%0A%20%20%20%20inputs%5Binputs.length%5D%20%3D%20inputFields%5Bno%5D%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%7D%20%20%20%0D%0A%20%20for(var%20no%3D0%3Bno%3CselectBoxes.length%3Bno%2B%2B)%7B%20%0D%0A%20%20%20%20inputs%5Binputs.length%5D%20%3D%20selectBoxes%5Bno%5D%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%7D%20%0D%0A%20%20%20%0D%0A%20%20for(var%20no%3D0%3Bno%3Cinputs.length%3Bno%2B%2B)%7B%20%0D%0A%20%20%20%20var%20required%20%3D%20inputs%5Bno%5D.getAttribute('required')%3B%20%0D%0A%20%20%20%20if(!required)required%20%3D%20inputs%5Bno%5D.required%3B%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20var%20mask%20%3D%20inputs%5Bno%5D.getAttribute('mask')%3B%20%0D%0A%20%20%20%20if(!mask)mask%20%3D%20inputs%5Bno%5D.mask%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20var%20freemask%20%3D%20inputs%5Bno%5D.getAttribute('freemask')%3B%20%0D%0A%20%20%20%20if(!freemask)freemask%20%3D%20inputs%5Bno%5D.freemask%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20var%20regexpPattern%20%3D%20inputs%5Bno%5D.getAttribute('regexpPattern')%3B%20%0D%0A%20%20%20%20if(!regexpPattern)regexpPattern%20%3D%20inputs%5Bno%5D.regexpPattern%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20var%20div%20%3D%20document.createElement('DIV')%3B%20%0D%0A%20%20%20%20div.className%20%3D%20'invalidInput'%3B%20%0D%0A%20%20%20%20inputs%5Bno%5D.parentNode.insertBefore(div%2Cinputs%5Bno%5D)%3B%20%0D%0A%20%20%20%20div.appendChild(inputs%5Bno%5D)%3B%20%0D%0A%20%20%20%20div.style.width%20%3D%20inputs%5Bno%5D.offsetWidth%20%2B%20'px'%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20inputs%5Bno%5D.onblur%20%3D%20validateInput%3B%20%0D%0A%20%20%20%20inputs%5Bno%5D.onchange%20%3D%20validateInput%3B%20%0D%0A%20%20%20%20inputs%5Bno%5D.onpaste%20%3D%20validateInput%3B%20%0D%0A%20%20%20%20inputs%5Bno%5D.onkeyup%20%3D%20validateInput%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20formElementArray%5Binputs%5Bno%5D.name%5D%20%3D%20new%20Array()%3B%20%0D%0A%20%20%20%20formElementArray%5Binputs%5Bno%5D.name%5D%5B'mask'%5D%20%3D%20mask%3B%20%0D%0A%20%20%20%20formElementArray%5Binputs%5Bno%5D.name%5D%5B'freemask'%5D%20%3D%20freemask%3B%20%0D%0A%20%20%20%20formElementArray%5Binputs%5Bno%5D.name%5D%5B'required'%5D%20%3D%20required%3B%20%0D%0A%20%20%20%20formElementArray%5Binputs%5Bno%5D.name%5D%5B'regexpPattern'%5D%20%3D%20regexpPattern%3B%20%0D%0A%0D%0A%20%20%20%20validateInput(false%2Cinputs%5Bno%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%0D%0A%20%20%7D%20%20%20%0D%0A%7D%20%0D%0A%0D%0Awindow.onload%20%3D%20initFormValidation%3B%20%0D%0A%0D%0A%3C%2Fscript%3E"> </head> <body> <form action="" method="post" onsubmit="if(isFormValid())alert('Everything is ok'); else { alert('Something is wrong');return false; }"> <fieldset> <legend>DHTML form validation</legend> <table> <tr> <td><label for="input1">First name:</label></td> <td><input name="input1" id="input1" type="text" required="1" value=""></td> <td>Required = 1</td> </tr> <tr> <td><label for="input2">Last name:</label></td> <td><input name="input2" id="input2" type="text" required="1" value=""></td> <td>Required = 1</td> </tr> <tr> <td><label for="email">Email:</label></td> <td><input name="email" id="email" mask="email" type="text" size="30" required="1" value=""></td> <td>Required = 1, mask = email</td> </tr> <tr> <td><label for="age">Age:</label></td> <td><input name="age" id="age" mask="numeric" type="text" required="1" value="" size="3" maxlength="3"></td> <td>Required = 1, mask = numeric</td> </tr> <tr> <td><label for="code">Code(SSSS-NN):</label></td> <td><input name="code" id="code" freemask="SSSS-NN" type="text" required="1" value="" size="8" maxlength="7"></td> <td>Required = 1, freemask = SSSS-NN i.e four letters and two digits</td> </tr> <tr> <td><label for="zipcode">Zip code(NNNNN-NNNN):</label></td> <td><input name="zipcode" id="zipcode" mask="zip" type="text" required="1" value="" size="11" maxlength="10"></td> <td>Required = 1, mask = zip</td> </tr> <tr> <td><label for="zipcode">Domain:</label></td> <td><input name="domain" id="domain" regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi" size="30" type="text" value=""></td> <td>regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi"</td> </tr> <tr> <td>Country</td> <td><select name="country" required="1"> <option value=""></option> <option value="Norway">Norway</option> <option value="Denmark">Denmark</option> <option value="Sweden">Sweden</option> <option value="Finland">Finland</option> <option value="France">France</option> <option value="United States">United States</option> <option value="Germany">Germany</option> </select> </td> <td>Required = 1</td> </tr> <tr> <td><input type="submit" value="Send"></td> </tr> </table> </fieldset> </form> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程