DHTML form validation
DHTML form validation
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;
}
/************************************************************************************************************
(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
DHTML form validation
First name: | Required = 1 | |
Last name: | Required = 1 | |
Email: | Required = 1, mask = email | |
Age: | Required = 1, mask = numeric | |
Code(SSSS-NN): | Required = 1, freemask = SSSS-NN i.e four letters and two digits | |
Zip code(NNNNN-NNNN): | Required = 1, mask = zip | |
Domain: | regexpPattern="/\b[A-Z0-9.-]+\.[A-Z]{2,4}\b/gi" | |
Country |
Norway Denmark Sweden Finland France United States Germany |
Required = 1 |
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Tags:DHTML form validation
相关文章
- 2015-12-12最简单的JavaScript图片轮播代码(两种方法)
- 2014-01-01IE6下拉框图层问题探讨及解决
- 2016-06-06关于网页中的无缝滚动的js代码
- 2016-06-06js实现获取两个日期之间所有日期的方法
- 2013-11-11JS+CSS 制作的超级简单的下拉菜单附图
- 2016-06-06原生js三级联动的简单实现代码
- 2017-07-07iscroll.js滚动加载实例详解
- 2017-08-08React Native仿美团下拉菜单的实例代码
- 2009-09-09使用JS判断是否数字和小数点组合的数字的两中方法比较(isNaN和逐
- 2014-09-09将数字转换成大写的人民币表达式的js函数