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

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

Javascript: 比较精简的Javascript拖动效果函数代码; 一个可以得到元素真实的背景颜色的javascript脚本; 代码精简的可以实现元素圆角的js函数; 用JS实现的一个include函数; IE 缓存策略的BUG的解决方法; $()JS小技巧; js右键菜单效果代码; XML的代替者----JSON; 清空代码防止查看源代码的js代码; 一个JS翻页效果; 用js获取点击图片的值!; 用innerHTML　＆符号副值给文本框后会变成＆amp;的方法; 让iframe自适应高度（支持XHTML，支持FF）; dsfasdfasdf; 用ASP将SQL搜索出来的内容导出为TXT的代码; 弹出广告特效(一个IP只弹出一次)的代码; javascript实现的动态文字变换; 服务器安全设置的几个注册表设置; 取键盘键位ASCII码的网页; 用倒置滤镜把div倒置，再把table倒置。

No. « ‹ 75 76 77 78 › »

技术文章搜索

关键字

Javascript 中的 DHTML form validation

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

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