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

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

Javascript: [IE&FireFox兼容]JS对select操作; JS实现全景图效果360度旋转; Unicode 编码转换器; 如何用javascript判断录入的日期是否合法; 图片从右至左滚动JS; JS控件autocomplete 0.11演示及下载 1月5日已更新; 一个对于js this关键字的问题; Javascript标准DOM Range操作全集; 兼容Mozilla必须知道的知识。; 你所要知道JS（DHTML）中的一些技巧; JS效率个人经验谈（8-15更新），加入range技巧; 如何让动态插入的javascript脚本代码跑起来。; Javascript调试工具（下载）; 脚本中出现 window.open() access is denied - 拒绝访问情况一则及分析; Javascript-Mozilla和IE中的一个函数直接量的问题; 贴一个在Mozilla中常用的Javascript代码; Javascript miscellanea -display data real time, using window.status; js技巧--转义符"\"的妙用; In Javascript Class, how to call the prototype method.(three method); Javascript与vbscript数据共享

No. « ‹ 40 41 42 43 › »

技术文章搜索

关键字

Javascript 中的 DHTML form validation

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

收藏到网摘: 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