一个检测表单数据的JavaScript实例-js教程-PHP中文网

首页

web前端

js教程

一个检测表单数据的JavaScript实例

高洛峰

Jan 23, 2017 pm 05:32 PM

表单

一个检测表单数据的JavaScript实例，很简单，很实用，感兴趣的朋友可以看看

<!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(&#39;input[aria-invalid="true"]&#39;); 
  //var fields =document.querySelectorAll("input[aria-invalid=&#39;true&#39;]");//错误！！！ 
  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实例相关文章请关注PHP中文网！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7322

Java教程

1625

CakePHP 教程

1350

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

如何实现PHP表单提交后的页面跳转 Aug 12, 2023 am 11:30 AM

如何实现PHP表单提交后的页面跳转【简介】在Web开发中，表单的提交是一项常见的功能需求。当用户填写完表单并点击提交按钮后，通常需要将表单数据发送至服务器进行处理，并在处理完后将用户重定向至另一个页面。本文将介绍如何使用PHP来实现表单提交后的页面跳转。【步骤一：HTML表单】首先，我们需要在HTML页面中编写一个包含表单的页面，以便用户填写需要提交的数据。

如何处理PHP表单中的用户权限管理 Aug 10, 2023 pm 01:06 PM

如何处理PHP表单中的用户权限管理随着Web应用程序的不断发展，用户权限管理是一个重要的功能之一。用户权限管理可以控制用户在应用程序中的操作权限，保证数据的安全性和合法性。在PHP表单中，用户权限管理可以通过一些简单的代码来实现。本文将介绍如何处理PHP表单中的用户权限管理，并给出相应的代码示例。一、用户角色的定义和管理首先，对用户角色进行定义和管理是用户权

如何使用 JavaScript 实现表单的输入框内容实时校验功能？ Oct 18, 2023 am 08:47 AM

如何使用JavaScript实现表单的输入框内容实时校验功能？在很多网页应用中，表单是用户与系统之间最常用的交互方式。然而，用户输入的内容往往需要进行有效性校验，以确保数据的准确性和完整性。在这篇文章中，我们将学习如何使用JavaScript实现表单的输入框内容实时校验功能，并提供具体的代码示例。创建表单首先，我们需要在HTML中创建一个简单的表

如何使用 JavaScript 实现表单的输入框内容自动提示功能？ Oct 20, 2023 pm 04:01 PM

如何使用JavaScript实现表单的输入框内容自动提示功能？简介：表单的输入框内容自动提示功能在网页应用中非常常见，它可以帮助用户快速输入正确的内容。本文将介绍如何使用JavaScript实现这一功能，并提供具体的代码示例。创建HTML结构首先，我们需要创建一个包含输入框和自动提示列表的HTML结构。可以使用以下代码：<!DOCTYP

PHP表单处理：表单数据查询与筛选 Aug 07, 2023 pm 06:17 PM

PHP表单处理：表单数据查询与筛选引言在Web开发中，表单是一种重要的交互方式，用户可以通过表单向服务器提交数据并进行进一步的处理。本文将介绍如何使用PHP处理表单数据的查询与筛选功能。表单的设计与提交首先，我们需要设计一个包含查询与筛选功能的表单。常见的表单元素包括输入框、下拉列表、单选框、复选框等，根据具体需求进行设计。用户在提交表单时，会将数据以POS

如何使用HTML、CSS和jQuery实现表单自动保存的高级功能 Oct 28, 2023 am 08:20 AM

如何使用HTML、CSS和jQuery实现表单自动保存的高级功能在现代网页应用中，表单是非常常见的元素之一。当用户在输入表单数据时，如何能够实现自动保存的功能，不仅可以提高用户的使用体验，也能确保数据的安全性。本文将介绍如何使用HTML、CSS和jQuery来实现表单的自动保存功能，并附上具体的代码示例。一、HTML表单的结构搭建我们首先来建立一个简单的HT

Laravel表单类使用技巧：提高效率的方法 Mar 11, 2024 pm 12:51 PM

在编写网站或应用程序时，表单是不可或缺的一部分。Laravel作为一款流行的PHP框架，提供了丰富而强大的表单类，使得表单处理变得更加简单和高效。本文将介绍一些Laravel表单类的使用技巧，帮助你提高开发效率。下面通过具体的代码示例来详细讲解。创建表单要在Laravel中创建表单，首先需要在视图中编写相应的HTML表单。在处理表单时，可以使用Laravel

如何使用HTML、CSS和jQuery创建一个带有浮动提示的表单 Oct 25, 2023 am 10:48 AM

如何使用HTML、CSS和jQuery创建一个带有浮动提示的表单在现代的网页设计中，表单是不可或缺的组件之一。为了提高用户体验，我们经常需要在表单中添加一些浮动提示，以引导用户正确填写表单。本文将介绍如何使用HTML、CSS和jQuery创建一个带有浮动提示的表单，并提供具体的代码示例。首先，我们需要创建HTML表单。在表单中，我们需要添加一些输入字段，以及

See all articles

一个检测表单数据的JavaScript实例

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题