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函数

最新评论

(0)

相关推荐

  • 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

  • Vue.js如何优雅的进行form validation

    本文针对知乎上关于Vue.js如何优雅的进行form validation问题进行了整理,供大家参考,具体内容如下 Vue.js如何优雅的进行form validation? 1. 所有validation rules是被集中管理,而不是每个文件自己一种,导致验证规则冗余. 2. 能够进行remote validate. 3. 不用JQuery. 现有的插件vuejs/vue-validator · GitHub只能实现普通验证,但如何解决1,因为vue-validator没有把校验规则给抽象出

  • 如何使用vuejs实现更好的Form validation?

    用vuejs对Form验证怎么进行对submit验证,验证失败不跳转,成功才跳转?我试了好几个方法都没实现,很郁闷,要么不验证,要么就是验证了不进行跳转. <input type="button" v-on:click="return submit()" class="btn btn-success" value="GO"/> 如何用vuejs实现更好的Form validation? 好像还是vue-valida

  • 详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

  • 详细解读AngularJS中的表单验证编程

    需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的目标了吧,让我们一起来构建这个东西吧. Angular 的表单属性 $valid, $invalid, $pristine, $dirty Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和

  • 10个新的最有前途的JavaScript框架

    1. SproutCore SproutCore 苹果对SproutCore的解释为"开源,平台无关,类Cocoa的JavaScript框架,用于创建具有桌面应用程序外观和操作感的Web应用程序." SproutCore demonstrations: Photos, Sample Controls 2. Spry Spry 是Adobe 的 Ajax framework. Spry的目的是成为实现Ajax的一种简单方式,对HTML.CSS和JavaScript体验据有入门级水平的设计

  • 理解php Hash函数,增强密码安全

    1.声明 密码学是一个复杂的话题,我也不是这方面的专家.许多高校和研究机构在这方面都有长期的研究.在这篇文章里,我希望尽量使用简单易懂的方式向你展示一种安全存储Web程序密码的方法. 2."Hash"是做什么的? "Hash将一段数据(小数据或大数据)转换成一段相对短小的数据,如字符串或整数." 这是依靠单向hash函数来完成的.所谓单向是指很难(或者是实际上不可能)将其反转回来.一个常见的hash函数的例子是md5(),它流行于各种计算机语言和系统. 复制代码 代

  • 奇妙的文件系统对象组件

    翻译 讨饭猫 很久以前(其实就几个月)就知道 Chinaasp 有个实际效果象黑客的ASE程序,最近 Chinaasp 又提供了精华区全文检索功能.看来文件系统对象组件还是很有用的,对吧?如果你对此有兴趣,可以看看这篇文章.本文属入门级,修行还靠你自己,呵呵. 注意:我们在下文中要操作的是Web服务器的文件系统,所以首先要确定你对该服务器有足够的权限.如果你不想麻烦你的Web Master,你也可以用微软的Personal Web Server来进行你的试验. FSO对象包括 驱动器对象(Dri

  • jquery简单体验

    jquery简单体验query是继prototype之后又一个优秀的Javascrīpt框架.对prototype我使用不多,简单了解过.但使用上jquery之后,马上被她的优雅吸引住了.有人使用这样的一比喻来比较prototype和jquery:prototype就像Java,而jquery就像ruby.实际上我比较喜欢java(少接触Ruby 罢了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自已唯一的框架类包.使用其间也有一点点心得,其实这些心得,在jq

  • 详解JavaScript中的表单验证

    表单验证用于发生在服务器,客户端已经输入所有必要的数据,然后按下提交按钮之后.如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失,则服务器将必须的所有数据发送回客户端,并请求的形式以正确的信息重新提交.这是一个漫长的过程,会增加服务器负担. JavaScript中,提供了一种方法将其发送到web服务器之前验证客户端的计算机上的形式的数据.表单验证通常执行两种方式. 基本验证 - 首先,该表必须进行检查,以确保数据输入的需要将其每一个表单字段.这将通过表格的每个字段只需要循环,并检查数据

随机推荐