<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>每天一个JavaScript实例-检測表单数据</title>

<style>

	[role="alert"]{

		background-color: #fcc;

		font-weight: bold;

		padding:5px;

		border:1px dashed #000;

	}

	div{

		margin:10px 0;

		padding:5px;

		width:400px;

		background-color: #fff;

	}

</style>

<script>

window.onload = function(){

	document.getElementById("thirdfield").onchange = validateField;

	document.getElementById("firstfield").onblur = mandatoryField;

	document.getElementById("testform").onsubmit = finalCheck;

}

function validateField(){

	removeAlert();

	if(!isNaN(parseFloat(this.value))){

		resetField(this);

	}else{

		badField(this);

		generateAlert("You entered an invalid value in Third Field. only numeric values such as 105 or 3.45 are allowed");

	}

}

function removeAlert(){

	var msg = document.getElementById("msg");

	if(msg){

		document.body.removeChild(msg);

	}

}

function resetField(elem){

	elem.parentNode.setAttribute("style","background-color:#fff");

	var valid = elem.getAttribute("aria-invalid");

	if(valid) elem.removeAttribute("aria-invalid");

}

function badField(elem){

	elem.parentNode.setAttribute("style","background-color#fee");

	elem.setAttribute("aria-invalid","true");

}

function generateAlert(txt){

	var txtNd = document.createTextNode(txt);

	msg = document.createElement("div");

	msg.setAttribute("role","alert");

	msg.setAttribute("id","msg");

	msg.setAttribute("class","alert");

	msg.appendChild(txtNd);

	document.body.appendChild(msg);

}

function mandatoryField(){

	removeAlert();

	if(this.value.length > 0 ){

		resetField(this);

	}else{

		badField(this);

		generateAlert("You must enter a value into First Field");

	}

}

function finalCheck(){

	//console.log("aaa");

	removeAlert();

	var fields =document.querySelectorAll('input[aria-invalid="true"]');

	//var fields =document.querySelectorAll("input[aria-invalid='true']");//错误！

！！

	console.log(fields);

	if(fields.length > 0){

		generateAlert("You have incorrect fields entries that must be fixed before you can submit this form");

		return false;

	}

}

</script>

</head>

<body>

<form id = "testform">

	<div>

		<label for="firstfield">*first Field:</label><br />

		<input id="firstfield" name = "firstfield" type = "text" aria-required = "true" />

	</div>

	<div>

		<label for="secondfield">Second Field:</label><br />

		<input id="secondfield" name = "secondfield" type = "text" />

	</div>

	<div>

		<label for="thirdfield">Third Field(numeric):</label><br />

		<input id="thirdfield" name = "thirdfield" type = "text" />

	</div>

	<div>

		<label for="fourthfield">Fourth Field:</label><br />

		<input id="fourthfield" name = "fourthfield" type = "text" />

	</div>

	<input type="submit" value = "Send Data" />

</form>

</body>

</html>

每天一个JavaScript实例-检測表单数据的更多相关文章

  1. 每天一个JavaScript实例-防止反复表单提交

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. JavaScript实现ajax发送表单数据

    知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...

  3. javaWeb中一个按钮提交两个表单

    一个按钮提交两个表单,有时候会用到,一般会很容易想到使用 onclick="document.form1.submit();document.form2.submit();" 的方 ...

  4. 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

    在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...

  5. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  6. Javascript中的Form表单知识点总结

    Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...

  7. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  8. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 2.Web开发过程流程图

    转自:https://blog.csdn.net/hello_simon/article/details/19993343 最近公司在进行一系列新模块的开发,在痛苦开发的过程中,大家不时在一起进行总结 ...

  2. 1.1 Introduction中 Apache Kafka™ is a distributed streaming platform. What exactly does that mean?（官网剖析）（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Apache Kafka™ is a distributed streaming p ...

  3. 动态规划例子：Maximal Square

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...

  4. node版本升级后，原有项目打不开

    node版本升级后,原有项目出现以下问题 gulp[8272]: src\node_contextify.cc:628: Assertion `args[1]->IsString()' fail ...

  5. 硬件——STM32，ADC篇

    未完,待续...... 也就是stm32f10X系列的adc采集出来的结果是12位的 stm32f10X系列有两个16位adc 关于程序的编写方法:一般  “某某.c文件”:都是用来设置“某某”的一些 ...

  6. 【AtCoder Beginner Contest 074 C】Sugar Water

    [链接]h在这里写链接 [题意] 让你在杯子里加糖或加水. (4种操作类型) 糖或水之间有一定关系. 糖和水的总量也有限制. 问你糖水浓度的最大时,糖和糖水的量. [题解] 写个dfs就好. 每次有4 ...

  7. [D3] Select DOM Elements with D3 v4

    Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...

  8. 3D游戏《龙心传奇Dragona》全套完整源码

    <龙心传奇Dragona>全套完整源码,<Dragona Online>也叫<龙心传奇>是一款3D中古奇幻风格网络游戏,描写叙述一个充满剑.魔法.恶魔和龙的魔法大陆 ...

  9. C语言深度剖析-----数组基础

    数组的概念 数组的大小 实例 内存占用 长度 a[5] 不指定初始值的话,随机给数值 数组地址与数组名 a为数组首地址,&a为数组地址,值相等,意义不同 数组名不可以直接相等 例:主义区分指针 ...

  10. ITFriend月刊-第1期-2014年6月.pdf

    ITFriend上线一个月了,积累了不少优质内容,本周进行了整理,制作了PDF格式的电子书. 欢迎大家下载阅读. 下载地址: CSDN下载:http://download.csdn.net/detai ...