<!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. Logstash Json 过滤器插件

    1. Json Filter 功能概述 这是一个JSON解析过滤器.它接受一个包含JSON的现有字段,并将其扩展为Logstash事件中的实际数据结构. 默认情况下,它将把解析过的JSON放在Logs ...

  2. Surging 微服务框架使用入门

    原文:Surging 微服务框架使用入门 前言 本文非 Surging 官方教程,只是自己学习的总结.如有哪里不对,还望指正.  我对 surging 的看法 我目前所在的公司采用架构就是类似与Sur ...

  3. Vim 模式及常用命令整理

    VIM 命令     以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令.   vim的模式 基本上可以分为3种模式,分别是命令模式(command mode).插入模 ...

  4. centos php 安装memcached 扩展 支持sasl

    1.安装sasl yum install cyrus-sasl-lib.x86_64 yum install cyrus-sasl-devel.x86_64 2.下载libmemcached wget ...

  5. [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 ...

  6. PHP与Linux进程间的通信

    进程间通信预计是公司考察应届毕业生的必考点(嵌入式行业).当然非常多公司考的是算法. 不查阅资料,我脑子里能想到的 [1] 管道, (有名.无名) [2] 父子进程 [3] System V (消息队 ...

  7. js闭包中的this（匿名函数中的this指向的是windows）

    js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...

  8. lettuce--Advanced Redis client

    redis官方提供的java client: git地址:https://github.com/mp911de/lettuceAdvanced Redis client for thread-safe ...

  9. spark算子介绍

    1.spark的算子分为转换算子和Action算子,Action算子将形成一个job,转换算子RDD转换成另一个RDD,或者将文件系统的数据转换成一个RDD 2.Spark的算子介绍地址:http:/ ...

  10. Spring5源码深度解析(一)之理解Configuration注解

    代码地址:https://github.com/showkawa/spring-annotation/tree/master/src/main/java/com/brian 1.Spring体系结构 ...