<!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. [JSOI2009]计数问题

    一个n*m的方格,初始时每个格子有一个整数权值.接下来每次有2种操作: 改变一个格子的权值: 求一个子矩阵中某种特定权值出现的个数. 输入输出格式 输入格式: 第一行有两个数N,M. 接下来N行,每行 ...

  2. mycat快速体验（转）

    横空出世的MyCat截至到2015年4月,保守估计已经有超过60个项目在使用,主要应用在电信领域.互联网项目,大部分是交易和管理系统,少量是信息系统.比较大的系统中,数据规模单表单月30亿.本人也初步 ...

  3. 8.Swift教程翻译系列——控制流之条件

    3.条件语句 常常会须要依据不同的情况来运行不同的代码. 你可能想要在错误发生的时候运行一段额外的代码,或者当某个值变得太高或者太低的时候给他输出出来.要实现这些需求,你能够使用条件分支. Swift ...

  4. Python 实用第三方库

    1. youtube 视频下载 使用:you-get pip install you-get you-get 'https://www.youtube.com/watch?v=jNQXAC9IVRw'

  5. call，apply，求最大最小值，平均数等基础编程知识

    CALL/APPLY.一些编程基础以及一些基础知识.正则 call.apply.bind 求数组的最大值和最小值: 数组排序(SORT的原理->localeCompare实现汉字比较),取头取尾 ...

  6. java.lang.IllegalArgumentException: org.hibernate.hql.internal.ast.QuerySyntaxException: student is not mapped

    Spring 5.0 +Jpa,使用@Query实现 自定义查询报错: java.lang.IllegalArgumentException: org.hibernate.hql.internal.a ...

  7. php语法同java语法的基本区别（实例项目需求，php才能熟）

    php语法同java语法的基本区别(实例项目需求,php才能熟) 一.总结 看下面 二.PHP基本语法以及和Java的区别 .表示字符串相加 ->同Java中的. $作为变量的前缀,除此之外,变 ...

  8. 【Codeforces Round #439 (Div. 2) B】The Eternal Immortality

    [链接] 链接 [题意] 求b!/a!的最后一位数字 [题解] b-a>=20的话 a+1..b之间肯定有因子2和因子5 答案一定是0 否则暴力就好 [错的次数] 在这里输入错的次数 [反思] ...

  9. Linux下搭建Memcached缓存系统

    首先说下抱歉,博主近期单位经常加班.博客更新有点慢.希望大家理解,草稿箱里存了不少内容,等不忙时候一点点填坑~ 在一般的站点开发学习时候.都会把数据存放在RDBMS(关系型数据库系统(Relation ...

  10. [Angular2] Build reuseable template with ngTemplateOutlet

    We can build a template, use this template and pass in different context to make it reuseable: <t ...