DHTML form validation

更新時間：2007年03月13日 00:00:00 作者：

<!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>  </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需再刷新一下頁面才能執(zhí)行]