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

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

Javascript: 在js中使用"with"语句中跨frame的变量引用问题; 原型方法的不同写法居然会影响调试的解决方法; 在JavaScript中遭遇级联表达式陷阱; JScript内置对象Array中元素的删除方法; 获取JavaScript用户自定义类的类名称的代码; 使用TextRange获取输入框中光标的位置的代码; 使用onbeforeunload属性后的副作用; IE7提供XMLHttpRequest对象为兼容; encode脚本和normal脚本混用的问题与解决方法; 用js判断用户浏览器是否是XP SP2的IE6; 关于使用runtimeStyle属性问题讨论文章; javascript学习随笔(使用window和frame)的技巧; javascript学习随笔(编写浏览器脚本 Navigator Scripting ); 跑马灯效果大全; 让超链接显示提示信息的js代码; 打开超链需要“确认”对话框的方法; javascript的对话框详解与参数; 让网页上的超链接失效，不能点击的js代码; 鼠标经过时链接文字的特别震撼的显示效果; 显示页面的所有链接的js代码

No. « ‹ 53 54 55 56 › »

技术文章搜索

关键字

Javascript 中的 DHTML form validation

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

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