DHTML form validation

ttx9n · 发表于 2007-3-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

</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需刷新才能执行]

mkonji · 发表于 2022-10-22 20:18:23

你们谁看了弄洒了可能

wxrf98xr · 发表于 2022-12-12 15:55:35

2222222222222222

8ayoqrpj · 发表于 2023-3-6 07:19:24

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

lba36h7g · 发表于 2023-6-2 07:18:12

笑纳了老板

fzyzy · 发表于 2023-6-16 11:30:20

好东西可以可以可以可以

wqpa63gz · 发表于 2023-6-23 23:58:12

为全额万千瓦

70r45_zs · 发表于 2023-9-3 20:33:00

儿飞飞微风DVD谁vdsvd

j__j33p · 发表于 2024-3-29 23:28:35

天天源码论坛

dingzhi521 · 发表于 2024-6-14 00:25:53

下载来瞧瞧

账号		自动登录	找回密码
密码			立即注册

[JavaScript] DHTML form validation

相关帖子