<!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. 1. vue环境搭建和配置

      const 相对于 var # 全局安装 vue-cli install可以简写成i 1.$ npm install --global vue-cli # 创建一个基于 webpack 模板的新项 ...

  2. Ubuntu14.04中踩过的坑

    今天安装Ubuntu 14.0.4,因为需要使用python3,所以就直接配置如下:sudo rm /usr/bin/pythonsudo ln -s /usr/bin/python3.5  /usr ...

  3. 【Educational Codeforces Round 33 A】Chess For Three

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.知道哪个人是旁观者就好 [代码] /* 1.Shoud it use long long ? 2.Have you ever ...

  4. 彻底搞懂HashMap,HashTable,ConcurrentHashMap之关联.

    注: 今天看到的一篇讲hashMap,hashTable,concurrentHashMap很透彻的一篇文章, 感谢原作者的分享.  原文地址: http://blog.csdn.net/zhange ...

  5. DE1-SOC调试linux应用程序

    参考http://www.alterawiki.com/wiki/SoCEDSGettingStarted#Getting_Started_with_Linux_Application_Debuggi ...

  6. Java中关于static语句块的理解

    Java中关于static语句块的理解 一.static块会在类被加载的时候执行且仅会被执行一次,一般用来初始化静态变量和调用静态方法. 实例一 public class A{ String name ...

  7. 翻翻git之---闪烁动画的TextView RevealTextView

    转载请注明出处:王亟亟的大牛之路 今天没有P1啦!. 对换工作有想法的.能够找昨天的P1.哈哈 地址:http://blog.csdn.net/ddwhan0123/article/details/5 ...

  8. 关于LWIP断开网线后重连问题（热插拔问题）

    近期在弄STM32+LWIP协议.在网络拔掉网线情况下.无法又一次连接. 网上找了好多方法都没有实现,着实郁闷! 后来无意间看到了临时解决这一问题的方法.尽管不是那么完美,但最算能解决这个问题.分享给 ...

  9. 使用PHP实现双向队列

    使用PHP实现双向队列 一.总结 就是几个array函数 push pop shift unshift n. 移动:变化:手段:轮班 vi. 移动:转变:转换 vt. 转移:改变:替换 二.使用PHP ...

  10. lettuce--Advanced Redis client

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