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> <script type="text/javascript"> /************************************************************************************************************ (C) www.dhtmlgoodies.com, February 2006 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.   Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/      // Patterns var formValidationMasks = new Array(); formValidationMasks['email'] = /\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi;  // Email formValidationMasks['numeric'] = /^[0-9]+$/gi;  // Numeric formValidationMasks['zip'] = /^[0-9]{5}\-[0-9]{4}$/gi;  // Numeric var formElementArray = new Array(); function validateInput(e,inputObj) {   if(!inputObj)inputObj = this;       var inputValidates = true;      if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='INPUT' && inputObj.value.length==0)inputValidates = false;   if(formElementArray[inputObj.name]['required'] && inputObj.tagName=='SELECT' && inputObj.selectedIndex==0){     inputValidates = false;   }   if(formElementArray[inputObj.name]['mask'] && !inputObj.value.match(formValidationMasks[formElementArray[inputObj.name]['mask']]))inputValidates = false;   if(formElementArray[inputObj.name]['freemask']){     var tmpMask = formElementArray[inputObj.name]['freemask'];     tmpMask = tmpMask.replace(/-/g,'\\-');     tmpMask = tmpMask.replace(/S/g,'[A-Z]');     tmpMask = tmpMask.replace(/N/g,'[0-9]');     tmpMask = eval("/^" + tmpMask + "$/gi");     if(!inputObj.value.match(tmpMask))inputValidates = false   }        if(formElementArray[inputObj.name]['regexpPattern']){     var tmpMask = eval(formElementArray[inputObj.name]['regexpPattern']);     if(!inputObj.value.match(tmpMask))inputValidates = false   }   if(!formElementArray[inputObj.name]['required'] && inputObj.value.length==0 && inputObj.tagName=='INPUT')inputValidates = true;         if(inputValidates){     inputObj.parentNode.className='validInput';   }else{     inputObj.parentNode.className='invalidInput'   } } function isFormValid() {   var divs = document.getElementsByTagName('DIV');   for(var no=0;no<divs.length;no++){     if(divs[no].className=='invalidInput')return false;   }   return true;   } function initFormValidation() {   var inputFields = document.getElementsByTagName('INPUT');   var selectBoxes = document.getElementsByTagName('SELECT');      var inputs = new Array();         for(var no=0;no<inputFields.length;no++){     inputs[inputs.length] = inputFields[no];        }     for(var no=0;no<selectBoxes.length;no++){     inputs[inputs.length] = selectBoxes[no];        }      for(var no=0;no<inputs.length;no++){     var required = inputs[no].getAttribute('required');     if(!required)required = inputs[no].required;              var mask = inputs[no].getAttribute('mask');     if(!mask)mask = inputs[no].mask;          var freemask = inputs[no].getAttribute('freemask');     if(!freemask)freemask = inputs[no].freemask;          var regexpPattern = inputs[no].getAttribute('regexpPattern');     if(!regexpPattern)regexpPattern = inputs[no].regexpPattern;          var div = document.createElement('DIV');     div.className = 'invalidInput';     inputs[no].parentNode.insertBefore(div,inputs[no]);     div.appendChild(inputs[no]);     div.style.width = inputs[no].offsetWidth + 'px';          inputs[no].onblur = validateInput;     inputs[no].onchange = validateInput;     inputs[no].onpaste = validateInput;     inputs[no].onkeyup = validateInput;               formElementArray[inputs[no].name] = new Array();     formElementArray[inputs[no].name]['mask'] = mask;     formElementArray[inputs[no].name]['freemask'] = freemask;     formElementArray[inputs[no].name]['required'] = required;     formElementArray[inputs[no].name]['regexpPattern'] = regexpPattern;     validateInput(false,inputs[no]);          }   } window.onload = initFormValidation; </script> </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需再刷新一下页面才能执行]

js动态添加表格逐行添加、删除、遍历取值的实例代码
最近做项目遇到这样的需求，要求表格添加一行，表格删除一行，表格遍历取值等。下面小编给大家带来了js动态添加表格逐行添加、删除、遍历取值的实例代码，需要的朋友参考下
2018-01-01
使用js实现复制功能
这篇文章主要为大家详细介绍了使用js实现复制功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
写了个XML+Tree无穷树js版
写了个XML+Tree无穷树js版...
2007-09-09
微信小程序实现接收验证码
这篇文章主要为大家详细介绍了微信小程序实现接收验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
JS实现json的序列化和反序列化功能示例
这篇文章主要介绍了JS实现json的序列化和反序列化功能,结合具体实例形式分析了javascript针对json的序列化与反序列化相关实现技巧,需要的朋友可以参考下
2017-06-06
Javascript删除数组里的某个元素
今天小编就为大家分享一篇关于Javascript删除数组里的某个元素，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-02-02
Javascript 更新 JavaScript 数组的 uniq 方法
2008-01-01
优化javascript的执行速度
这个是我在网上找的资料，具体的出处，我已经记不清楚了，觉得很不错，就和大家分享了
2010-01-01
javascript之更有效率的字符串替换
今天研究了一下JS比较高级的正则表达式方法，发现一个我认为比原来的方法更有效率的字符串替换方法。
2008-08-08
IE和Firefox的Javascript兼容性总结[推荐收藏]
长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬
2011-10-10

DHTML form validation

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具