页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

DHTML form validation

发布：dxy 发布日期：2007-3-13 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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 全选提示:你可先修改部分代码,再按运行]

Tags：DHTML form validation

百度中搜索更多的关于DHTML form validation内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：用js实现的十进制的颜色值转换成十六进制的代码
下一篇文章：li隔行换色改进版

文章评论

共有位脚本之家网友发表了评论我来说两句

DHTML form validation

文章评论

同类文章

最近更新

热点排行

DHTML form validation

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行