JavaScript 学习笔记 - 6 表单处理

最新推荐文章于 2024-05-16 16:52:30 发布
最新推荐文章于 2024-05-16 16:52:30 发布
阅读量329 收藏 3
点赞数
分类专栏： JavaScript 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24951479/article/details/128268691
版权

目录

在这里插入图片描述

6.1 选择并转移导航菜单

<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<link rel="stylesheet" href="script01.css">
<script src="script01.js"></script>
</head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value="script06.html">Cross-checking fields</option>
<option value="script07.html">Working with radio buttons</option>
<option value="script08.html">Setting one field with another</option>
<option value="script09.html">Validating Zip codes</option>
<option value="script10.html">Validating email addresses</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
</body>
</html>

在这里插入图片描述

.centered {
text-align: center;
}
`

```javascript
window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById("newLocation");
var newPage = newLoc.options[newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}

6.2 动态地改变菜单

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Menus</title>
<script src="script02.js"></script>
</head>
<body>
<form action="#">
<select id="months">
<option value="">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
&nbsp;
<select id="days">
<option>Day</option>
</select>
</form>
</body>
</html>

window.onload = initForm;
function initForm() {
document.getElementById("months").selectedIndex = 0;
document.getElementById("months").onchange = populateDays;
}
function populateDays() {
var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var monthStr = this.options[this.selectedIndex].value;
if (monthStr != "") {
var theMonth = parseInt(monthStr);
document.getElementById("days").options.length = 0;
for (var i=0; i<monthDays[theMonth];i++) {
document.getElementById("days").options[i] = new Option(i+1);
}
}
}

6.3 建立必须填写的字段

<!DOCTYPE html>
<html>
<head>
<title>Password Check</title>
<link rel="stylesheet" href="script03.css">
<script src="script03.js"></script>
</head>
<body>
<form action="#">
<p><label for="userName">Your name:<input type="text" size="30" id="userName" class="reqd"></label> </p>
<p><label for="passwd1">Choose a password: <input type="password" id="passwd1" class="reqd"></label></p>
<p><label for="passwd2">Verify password:<input type="password" id="passwd2" class="reqd passwd1">
➝ </label></p>
<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p>
</form>
</body>
</html>

在这里插入图片描述

body {
color: #000;
background-color: #FFF;
}
input.invalid {
background-color: #FF9;
border: 2px red inset;
}
label.invalid {
color: #F00;
font-weight: bold;
}

window.onload = function() {
document.forms[0].onsubmit = validForm;
}
function validForm() {
var allGood = true;
var allTags = document.forms[0].getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length;j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
classBack += thisClass;
}
return classBack;
}
}
}

6.4 根据其他字段对字段进行检查

在这里插入图片描述

window.onload = function() {
document.forms[0].onsubmit = validForm;
}
function validForm() {
var allGood = true;
var allTags = document.forms[0].getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value == document.getElementById(otherFieldID).value);
}
}
}
}

crossCheck()函数:它接收当前标签和检查所针对的另一个字段的 id。在这个示例中，当前
标签是 passwd2 ，另一个字段的 id 是 passwd1。如果另一个字段不存在，就无法进行检查，这就说明有问题，所以函数返回 false。否则，这两个字段都存在，所以可以比较它们的值：如果相同，就返回 true；如果不同，就返回 false。

6.5 标识有问题的字段

window.onload = function() {
document.forms[0].onsubmit = validForm;
}
function validForm() {
var allGood = true;
var allTags = document.forms[0].getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.alue == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value == document.getElementById(otherFieldID).value);
}
}
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}

function invalidLabel(parentTag) {
if (parentTag.nodeName == “LABEL”) {
parentTag.className += " invalid";
}
}

6.6 准备进行表单验证

<!DOCTYPE html>
<html>
<head>
<title>Car Picker</title>
<link rel="stylesheet" href="script06.css">
<script src="script06.js"></script>
</head>
<body>
<h2 class="centered">Car Picker</h2>
<form action="someAction.cgi">
<p><label for="emailAddr">Email Address: <input id="emailAddr" type="text" size="30" class="reqd email">
➝ </label></p>
<p>Colors:
<select id="color" class="reqd">
<option value="" selected>Choose a color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
</p>
<p>Options:
<label for="sunroof"><input type="checkbox" id="sunroof" value="Yes">Sunroof (Two door only)</label>
<label for="pWindows"><input type="checkbox" id="pWindows" value="Yes">Power Windows</label>
</p>
<p>Doors:&nbsp;&nbsp;
<label for="twoDoor"><input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio">
➝ Two</label>
<label for="fourDoor"><input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio">
➝ Four</label>
</p>
<p>
<label for="zip">Enter your Zip code or pick the dealer nearest you:<br>
Zip: <input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList">
</label>
<select id="dealerList" size="4" class="zip">
<option value="California--Lemon Grove">California--Lemon Grove</option>
<option value="California--Lomita">California--Lomita</option>
<option value="California--Long Beach">California--Long Beach</option>
<option value="California--Los Alamitos">California--Los Alamitos</option>
<option value="California--Los Angeles">California--Los Angeles</option>
</select>
</p>
<p><input type="submit" value="Submit">&nbsp;<input type="reset"></p>
</form>
</body>
</html>

在这里插入图片描述

function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
case "isNum":
case "isZip":
case "email":
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
}
}
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}

6.7 处理单选按钮

在这里插入图片描述

window.onload = function() {
document.forms[0].onsubmit = validForm;
}
function validForm() {
var allGood = true;
var allTags = document.forms[0].getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if (allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isNum":
case "isZip":
case "email":
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
}
function radioPicked(radioName) {
var radioSet = document.forms[0][radioName];
if (radioSet) {
for (k=0; k<radioSet.length; k++) {
if (radioSet[k].checked) {
return true;
}
}
}`window.onload = initForm;
function initForm() {
document.forms[0].onsubmit = validForm;
document.getElementById("sunroof").onclick = doorSet;
}
function validForm() {
var allGood = true;
var allTags = document.forms[0].getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";120 第 6 章 表单处理
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if (allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isNum":
case "isZip":
case "email":
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
}
function radioPicked(radioName) {
var radioSet = document.forms[0][radioName];
if (radioSet) {
for (k=0; k<radioSet.length; k++) {
if (radioSet[k].checked) {
return true;
}
}
}
return false;
}
}
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
function doorSet() {
if (this.checked) {
document.getElementById("twoDoor").checked = true;
}
}`
return false;
}
}
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}

6.8 用一个字段设置另一个字段

在这里插入图片描述

6.9 检验 Zip 编码

在这里插入图片描述

function isNum(passedVal) {
if (passedVal == "") {
return false;
}
for (var k=0; k<passedVal.length; k++) {
if (passedVal.charAt(k) < "0") {
return false;
}
if (passedVal.charAt(k) > "9") {
return false;
}
}
return true;
}
function isZip(inZip) {
if (inZip == "") {
return true;
}
return (isNum(inZip));
}
}
}

6.10 验证电子邮件地址

function validEmail(email) {
var invalidChars = " /:,;";
if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {

return false;
}
Helloworld188888
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 表单处理
weixin_53188576的博客
09-07 162
JavaScript 是一种强大的脚本语言，可用于处理网页中的表单。通过 JavaScript，我们可以对表单进行验证、收集用户输入以及执行其他与表单相关的操作。在本篇文章中，我们将简要介绍一些常用的 JavaScript 表单处理技巧。
Vue.js表单处理技术指南
2301_79120741的博客
07-19 180
在Web开发中，表单是用户与应用程序进行交互的重要组成部分。Vue.js是一种流行的JavaScript框架，它提供了强大的工具和机制来处理表单数据。Vue.js表单处理使开发者能够轻松地收集、验证和提交用户输入的数据。Vue.js表单处理的核心概念是双向数据绑定。通过将表单元素与Vue实例中的数据属性进行绑定，任何对表单元素的更改都会自动更新Vue实例中的数据，反之亦然。这种双向绑定使得表单处理变得非常简洁和高效。在Vue.js中，表单是Web应用程序中常见的交互元素之一。
原生js操作table表格增删改查操作汇总
最新发布
随手记的笔记
05-16 574
【代码】原生js操作table表格增删改查操作汇总。
js操作excel常用方法,js处理表格数据
阿发狗伪原创
11-28 2296
大家好，小编为大家解答js操作excel常用方法的问题。JavaScript 读取 Excel 文档里的内容实例演示。④ 将读取的 Excel 内容转化为 json 字符串。④ 将读取的 Excel 内容转化为 json 字符串。① 下载 xlsx.full.min.js 支持包。① 下载 xlsx.full.min.js 支持包。看下控制台，这是返回的第一个。可以获取指定单元格里的内容。第二章：功能实现与使用演示。第二章：功能实现与使用演示。③ 获取指定单元格的内容。③ 获取指定单元格的内容。
js处理表单里表格的数据
weixin_58057048的博客
04-11 219
1.先获取//取得这个table。2.取得这个table下的所有行。
01-认识javaScript-学习笔记md
10-16
JavaScript 诞生于1995 年。 JavaScript是一种基于对象和事件驱动的客户端脚本语言, 最初的设计是为了检验HTML表单输入的正确性, 起源于Netscape公司的LiveScript语言。
表单结构与表单对象学习笔记
01-20
二是用于处理用户在表单域中输入信息的服务器端应用程序或客户端脚本，如Asp、net、JSP、JavaScript 等。 二.基本语法： ... ... ... ... 1.单行文本输入框 基本语法： 当type==”text”时，表示该输入项的输入...
html.css.javascript-学习笔记.doc
09-30
HTML、CSS、JavaScript 学习笔记 HTML 篇： 一、HTML 的相关介绍 1. HTML 的介绍 HTML（HyperText Markup Language）是用于创建网页的标记语言。它是一种标准通用标记语言，使用标签来标记网页中的元素，从而...
HTML学习笔记（五）——表单
01-08
过去，需要编写 JavaScript 以增强表单行为——例如，要求访问者提交表单之前必须填写某个字段。HTML5 通过引入新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL 以及定制模式的验证，让这...
Javascript基础ppt
Rita的博客
06-08 1500
这里写自定义目录标题本章目标JavaScript概述●JavaScript的应用场景●JavaScript的特点●JavaScript的开发 与运行JavaScript基本语法●JavaScript语句和代码块 w3school：https://www.w3school.com.cn/js/index.asp 本章目标 ●了解JavaScript起源、特征 ●掌握JavaScript程序的开发工具、运行环境、运行机制等 ●掌握JavaScript语言规范:变量、常量、变量类型、流程处理语句、函数定义声明、对
JavaScript 操作表单
寇大大的博客
06-07 487
目录 JS操作表单 1.HTML表单 2、获取值 3、设置值 4、提交表单 JS操作表单 1.HTML表单 用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text"> ，用于输入文本； 口令框，对应的<input .
JavaScript处理表单事件以及获取表单属性值
m0_65226678的博客
05-10 1104
JavaScript处理表单事件以及获取表单属性值
js form表单数据操作
独角兽的博客
07-05 1267
想得到一个FormData对象： var formdata = new FormData(); W3c草案提供了三种方案来获取或修改FormData。 方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对： var formdata = new FormData(); formdata.append(
js获取表单数据
热门推荐
wangwuyilove的专栏
04-15 4万+
最近用到好多问题都是js的问题，以前学习js的时候没有学好，好多方法都记得不是很清楚了，写一写把知识点复习一下。 在页面获取表单（div）的数据，js封装了好多方法，有getELementById(id)、getElementsByName(name)、getElementByTagName(tagname)等等。   1、先来说下getElementById（id）这个方法，这个方法是特别
JavaScript_清除表单数据_条件查询
迎难而上
12-11 4850
我们经常为条件查询后留下的回显数据(echo ) 苦恼，我们希望按一个清除按钮既可以完成对条件查询后的回显数据进行清除。 我们可以通过js代码对表单内的数据进行清除: 思路：判断表单内控件的类型，如果是要清除的类型， 将对应的elements的value 直接设置为空（“”）  实现的原生js代码 function jsClearForm(objForm){
利用JS轻松实现获取表单数据
klx502的专栏
03-15 6946
转自：http://www.jb51.net/article/99261.htm 接触过Angularjs的都知道,ng支持双向绑定，我们可以轻轻松松的通过ngModel将我们的值绑定到界面，当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了。那对于我们开发前台网站，不用ng一类的MVVM框架，只引用了Jquery，那么在处理表单的时候该怎么做呢。 一. 原始做法
nodejs之处理表单数据
张常文的博客
11-05 4255
接收从页面发送过来的数据。首先的将html表单放在form里，然后将form的method属性设置为post。 接着在服务器端设置判段当请求的类型为post时处理数据，例如：form的action属性为Add.js。 var http=require("http"); var fs=require("fs"); var qs=require("querystring"); var
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值