<!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. 关于hive里安装mysql出现错误，如何删除指定的主机或用户？（解决Access denied）

    前期博客 你可以按照我写的这篇博客去,按照hive的mysql. 1 复习ha相关 + weekend110的hive的元数据库mysql方式安装配置(完全正确配法)(CentOS版本)(包含卸载系统 ...

  2. ThinkPHP5.0的安装

    ThinkPHP5.0的安装很简单: 1.下载“phpstudy”安装 2.下载thinkphp源文件 3.把thinkphp源文件解压并放到phpstudy目录下的“WWW”目录 4.然后开启服务并 ...

  3. Excel数据比对-批量数据比对

    1.导出现场的Excel收费规则2.有专门的代码写的测试收费规则的工具(开发自己开发的)3.在这个工具上选择,导出的收费规则Excel,点击导出按钮(导出按钮里面有计算每一列的计费结果4.Excel里 ...

  4. vc 常用语句

    1) CMainFrame* pmainframe=(CMainFrame*)AfxGetMainWnd();CChildFrame *m_finderframe=(CChildFrame*)pmai ...

  5. express 的路由分离

    在做大型项目是一般不会把路由写入server.js里,所以就有了路由分离 1.在项目目录下创建router文件夹 user.js var express = require("express ...

  6. RMAN冷备份、一致性备份脚本

    RMAN冷备份.一致性备份脚本 run{ shutdown immediate; startup mount; allocate channel c1 type disk; allocate chan ...

  7. 【AtCoder Beginner Contest 074 D】Restoring Road Network

    [链接]h在这里写链接 [题意] 给你任意两点之间的最短路. 让你求出原图. 或者输出原图不存在. 输出原图的边长总和的最小值. [题解] floyd算法. 先在原有的矩阵上. 做一遍floyd. 如 ...

  8. JavaScript字符串替换replace方法

    在日常的js开发中, 当要把字符串中的内容替换时,如果使用类似C#的string.replace方法,如下 var str='aabbccaa'; str=str.replace('aa','dd') ...

  9. 硬件——STM32 , SN74HC573锁存器

    74HC573是一款高速CMOS器件: 上图中:输出使能为:OE   锁存使能为:LE 典型电路: 上图中:PWR-AL-0,PWR-AL-1,PWR-AL-2:是单片机输出的高低电平给573 对应的 ...

  10. 9.9 Binder系统_Java实现_Android里java程序的编译启动

    如果知道了进程号:通过ls /proc/进程号/task 可以看到所有线程    cat /proc/进程号/task/线程号/comm  可以达到线程名字(主线程是main,主线程号就是进程号) d ...