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代码
主要是通过判断指定位数的数字，来判断并加以算法实现男女性别的判断。
2009-11-11
JavaScript文件上传的常见问题整理
这篇文章整理了JavaScript文件上传的常见问题，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
js格式化货币数据实现代码
货币数据想要一某种形式在页面中显示的话，首先是必须要格式化的，下面为大家介绍下具体的格式化代码，感兴趣的朋友可以参考下
2013-09-09
Js中parentNode,parentElement,childNodes,children之间的区别
这篇文章主要是对Js中parentNode,parentElement,childNodes,children的区别进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
event.X和event.clientX的区别分析
解释一下event.X和event.clientX有什么区别？event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样但是如果设置事件对象的定位属性值为relative
2011-10-10
关于layui导航栏不展示下拉列表的解决方法
今天小编就为大家分享一篇关于layui导航栏不展示下拉列表的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript中的DSL元编程介绍
这篇文章主要介绍了JavaScript中的DSL元编程介绍,本文讲解了JavaScript元编程、JavaScript eval、JavaScript new Function()等内容,需要的朋友可以参考下
2015-03-03
js获取网页可见区域、正文以及屏幕分辨率的高度
这篇文章主要介绍了js获取网页的各种高度，例如可见区域、正文以及屏幕分辨率的高度,需要的朋友可以参考下
2014-05-05
微信小程序实现Swiper轮播图效果
这篇文章主要介绍了微信小程序实现Swiper轮播图效果，文中示例代码介绍的非常详细，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
由于需要在服务器端处理，使用就研究使用imagemagick来进行。同时准备封装了一个Node.js和Python的方法，主要还是讲一下然后使用imagemagick来对图片进行缩放、合成后进行裁剪吧
2013-09-09

DHTML form validation

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具