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

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

Javascript: JavaScript实现Sleep函数的代码; 一个可以显示阴历的JS代码; 从csdn弄下来的页面预先载入效果; 键盘事件中keyCode、which和charCode 的兼容性测试; 一个支持ff的modaldialog的js代码; [js+css]点击隐藏层,点击另外层不能隐藏原层; 用javascript实现页面打印的三种方法; HTML-CSS群中单选引发的“事件”; 一款不错的键盘密码输入js程序; 限制文本字节数js代码; 静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。; 用javascript动态调整iframe高度的方法; 用一段js程序来实现动画功能; javascript实现划词标记+划词搜索功能; javascript 简单高效判断数据类型系列函数 By shawl.qiu; 服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu; 禁止F5等快捷键的JS代码; 在textarea文本域中显示HTML代码的方法; Javascript之文件操作; 修改发贴的编辑功能

No. « ‹ 51 52 53 54 › »

技术文章搜索

关键字

Javascript 中的 DHTML form validation

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

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