DHTML form validation- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > DHTML form validation

Javascript: Javascript实例教程(17) 使用Javascript的数学函数; JavaScript 小技巧(第六集); Javascript实例教程(16) 日期函数; javascript中如何实现浏览器上的右键菜单; Javascript实例教程(21) OLE Automation(7); JavaScript 小技巧(第二集); Javascript设计网页中的下拉菜单; 用JavaScript使链接按钮不断变化; 如何制作浮动广告; JavaScript[对象.属性]集锦之一; 将金额小写转化成汉字大写的实现过程; Javascript制作浮动的工具条; JavaScript[对象.属性]集锦之二; JavaScript 小技巧(第五集); JavaScript 小技巧(第七集); 完美解决一个事件激活多个函数; JavaScript入门学习之一; 在客户端把表格行变成列，列变成行并保持TD的属性不丢失; 用 Javascript 实现的“Dual listbox”(双向选择器); 我与Javascript 随笔（一）（献给所有爱好Javascript的朋友）

No. « ‹ 11 12 13 14 › »

技术文章搜索

关键字

Javascript 中的 DHTML form validation

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 119 ::

收藏到网摘: n/a

用js实现的十进制的颜色值转换成十六进制的代码 js资料toString 方法

点击运行可以看到效果:

<!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资料toString 方法

Javascript 中的 DHTML form validation

评论 (0) All