JavaScript 学习笔记 - 6 表单处理

最新推荐文章于 2024-10-02 14:08:31 发布
最新推荐文章于 2024-10-02 14:08:31 发布
阅读量361 收藏 3
点赞数 1
分类专栏： 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
关注
专栏目录
JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 1577
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
JS基础---表单处理
许小乖……是总攻
01-20 1480
在JS中最让人头疼的就是浏览器的兼容问题，李炎恢老师在整个视频的讲解过程中也一直在解决浏览器的兼容问题。但这同时老师也在向我们传达一个道理，当你在一个浏览器下测试成功了，并不代表所有的用户都会使用这一个浏览器，如果用户在另外一个浏览器看到的完全是另一个样子，或者功能不能实现的时候，这就是我们做软件的失败了。所以，浏览器的兼容问题也在体现全心全意为人民服务的宗旨。
JavaScript 表单处理
weixin_34206899的博客
07-21 157
为了分担服务器处理表单的压力，JavaScript提供了一些解决方案，从而大大打破了处处依赖服务器的局面。 一．表单介绍 在HTML中，表单是由<form>元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因此它拥有HTML元素具...
js进阶——使用js操作表单数据并回显
最新发布
2301_79858914的博客
10-02 799
通过本文，可以学会如何使用JavaScript将表单数据封装为对象，如何替换对象中的属性名，以及如何将对象数据回显到表单中。这些技巧在实际的Web开发中非常实用，能够帮助你更好地处理表单数据。
js处理表单
yangchunhe09的专栏
06-23 151
以下form1代表当前操作form的name属性值或者ID 1.js获取指定表单：var vform=document.getElementById(“form1”);                            var oform=document.forms[i];//i代表表单所有 2.js提交表单：document.form1.submit();   3.js重置表...
操作表单验证加密
m0_53698336的博客
07-27 390
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text">，用于输入文本； 口令框，对应的<input type="password">，用于输入口令； 单选框，对应的<input type="radio">，用
JavaScript学习笔记-B站动力节点
m0_52041525的博客
02-19 1746
文章目录1.1.什么是JavaScript，有什么用？1.2.HTML，CSS，JavaSript三者关系2.在HTML中怎么嵌入JavaScript代码？3.4.5.6.7.8.9.10.11.12.13.14.15. 1.1.什么是JavaScript，有什么用？ JavaScript是运行在浏览器上的脚本语言。简称JS。 JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。 LiveScript的出现让浏览器更加的生动
JavaScript学习笔记
08-16
### JavaScript学习笔记精要 #### 一、JavaScript概述 JavaScript是一种重要的编程语言，在现代Web开发中扮演着不可或缺的角色。它最初由Netscape公司的Brendan Eich在1995年开发完成，并且最初的名字叫做...
js处理表单里表格的数据
weixin_58057048的博客
04-11 284
1.先获取//取得这个table。2.取得这个table下的所有行。
js获取form表单
07-11
ajax js一次性获取form表单
JavaScript（七）表单数据处理
杨大侠不是奥特曼的博客
09-05 337
方法一：通过事件调用自定义函数 以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function validateForm() { var x = doc...
javascript基础：表单处理1
gongwutianya的博客
07-10 451
一、表单介绍 为了分担服务器处理表单的压力, JavaScript 提供了一些解决方案,从而大大打破了处处依赖服务器的局面。 在 HTML 中,表单是由元素来表示的,而在 JavaScript 中,表单对应的则是HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement,因此它拥有 HTML 元素具有的默认属性,并且还独有自己的属
javascript中form表单的处理
qq_32914323的博客
02-22 370
表单验证： 用户名必填，长度6-20 密码必填，且密码和确认密码需要相同 性别必须要选择 爱好至少要选择1项 学历，必须要选择 备注必填 var pwd = "123456";//数据库取,testing 写个固定值 String.prototype.trim_1=function(){ return this.replace(/(^\s*)|(\s*$)/g
JavaScript处理表单事件以及获取表单属性值
m0_65226678的博客
05-10 1151
JavaScript处理表单事件以及获取表单属性值
javascript处理和验证表单
月习
10-25 94
[code="java"] function load(){ //可以用下标也可以用id/name属性来获取表单元素 var firstName =document.forms["userForm"]["firstName"].value; var lastName = document.forms[0].elements[1].value; ...
JS-操作表单
Mu木
11-26 438
获取和修改表单的值 用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 <form action="" method="post"> <p> <span>用户名：</span> <input type="text" id="username"> </p> <!--多选框--> <p> <span>性
javascript表单处理实例
maiken的博文
05-29 1403
    javascript表单处理             function test01(){    if(document.getElementsByName(radiot01)[0].checked){      alert("单选框1选中了！");    }else if(document.getElementsByName(radiot01)[1].checked){     
JavaScript学习笔记：核心概念与关键应用
"这是一份关于JavaScript的学习笔记，主要涵盖了JavaScript的基本概念、组成部分以及语言基础，包括数据类型、数组和函数等基础知识。这份笔记适用于初学者，旨在帮助他们理解和掌握JavaScript在网页交互、数据验证...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值