在填写表单时,可能希望指定用户必须填写某些字段,然后才能提交表单。可以使用JavaScript检查某些或所有字段是否已经填写了。在这个示例中,使用了HTML、CSS和JavaScript通过红色的边框和黄色的内部颜色突出显示未填写的字段。检查在用户单击表单的Submit按钮时进行。
也经常需要根据另一个字段对一个字段进行检查,尤其是在要求用户设置密码时。为了确保密码正确,希望用户输入密码两次,并确保两次的输入完全相同。此示例当检查无效时,无效的字段会显示红色的边框。
密码检查示例的HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Password Check</title>
<link type="text/css" rel="stylesheet" href="script01.css" />
<script type="text/javascript" src="script01.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" /> <input type="reset" /></p>
</form>
</body>
</html>
表示为无效的表单元素设置样式的CSS
body {
color: #000;
background-color: #FFF;
}
input.invalid {
background-color: #FF9;
border: 2px red inset;
}
label.invalid {
color: #F00;
font-weight: bold;
}
使用下面的脚本比较两个字段的值,检查它们是否匹配
window.onload = initForms;
function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
}//这个函数遍历页面上的每个表单
function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");
//星号让JavaScript返回一个包含页面上所有标签的数组。
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
//返回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);
}
}
}
document.forms[i].onsubmit = function() {return validForm();
对每个表单,它为表单的onsubmit添加一个事件处理程序:对function(){return validForm();}的调用。这是另一个匿名函数,但是这一次它要执行一些操作:它返回true或false,告诉浏览器是否继续处理动作属性。当onsubmit处理程序返回false值时,表单就不会被传递回服务器。只有在返回true时,服务器才会收到表单(因此运行动作属性中存储的CGI)。
if (outClass.indexOf("invalid") > -1) {
在新的class属性中可能返回的值之一是单词invalid,所以要检查它。如果在新的类中找到了invalid,就说明有问题,因此执行对应的操作。
thisTag.focus();
如果这个表单字段可以获得焦点,那么希望将焦点放进这个字段,这一行就完成这个任务。这是让用户知道哪个字段有问题的一种方法。
if (thisTag.nodeName == "INPUT") {thisTag.select();}
判断当前查看的这个标签是<INOUT>标签吗?如果是,就选择它的值,让用户能够轻松的修改它。
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID))
{return false;}
return (inTag.value == document.getElementById(otherFieldID).value);
}它接收当前标签和检查所针对的另一个字段id。在这个示例中,当前标签是passwd2<input>,另一个字段的id是passwd1。如果另一个字段不存在,就无法进行检查,这就说明有问题,所以函数返回false。否则,这两个字段都存在,所以可以比较它们的值:如果相同,就返回true,否则返回false。
(源《JavaScript基础教程》)
分享到:
相关推荐
6.4 根据其他字段对字段进行检查 109 6.5 标识有问题的字段 111 6.6 准备进行表单验证 113 6.7 处理单选按钮 117 6.8 用一个字段设置另一个字段 119 6.9 检验Zip编码 122 6.10 验证电子邮件地址 126 ...
本文实例讲述了Python实现针对json中某个关键字段进行排序操作。分享给大家供大家参考,具体如下: 示例: json_array = [{"time":20150312,"value":"c"}, {"time":20150301,"value":"a"}, {"time":20150305,"value...
当提交表单时,JavaScript代码会捕获并输出员工的详细信息到浏览器的控制台,并清空表单字段,以方便添加下一个员工。 请注意,这只是一个简单的示例,用于展示基本的前端交互和数据处理。在实际应用中,你需要...
主要介绍了Go返回int64类型字段超出javascript Number范围的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本例我们使用iServer Java 6R自带地图“京津地区土地利用现状图”,对Landuse_R数据集做单值专题图,根据Landuse_R数据集的LANDTYPE字段将土地利用划分为林地与非林地这种类型通过专题图展示出来,Landuse_R数据集中...
主要介绍了js数组相减,结合简单示例形式分析了JavaScript删除a数组所有与b数组相同元素相关个遍历、判断、删除等相关操作技巧,需要的朋友可以参考下
本文实例讲述了JavaScript解析JSON数据。分享给大家供大家参考,具体如下: JSON数据是一种常用的数据格式,解析方式也比较简单,特别是由于JavaScript原生就支持JSON,所以JavaScript能够更好的解析JSON。 <!...
字段类型的例子 社区创建的Storyblok的字段类型的集合。 阅读有关创建字段类型的更多信息 表中的内容 例子 每个示例都包含一个README.md ,其中包含有关字段类型的说明。 例子 作者 允许用户选择任何材质图标 显示...
17.5.1 检查空字段 17.5.2 检查邮政编码 17.5.3 检查字母数据 17.5.4 删除多余字符 17.5.5 有效社会安全号码验证 17.5.6 验证电话号码 17.5.7 验证电子邮件地址 17.5.8 验证...
在`<head>`标签中,我们可以看到一个 `<script>`标签,它用于链接一个外部JavaScript文件`shiyan 2.js`,该文件用于定义页面的JavaScript脚本。 表单验证 在这个示例中,我们可以看到一个表单验证的示例,该表单...
一个无主题的Web组件,用于根据表单字段值过滤可见的子元素。 筛选器容器一种无主题的Web组件,用于根据表单字段值筛选可见的子元素。 演示jamstack.org上的演示(按语言,模板或许可过滤)zachleat.com上的演示(按...
验证表格验证表单是用户帐户上html表单的完整示例,具有不同的字段,所需的验证和自定义文本字段。开发界面它是开发HTML,CSS(SASS)和Javascript(Jquery)。 使用gulp在一个文件中编译js和sass。内容Javascript库...
在本文档中,我们将使用带有questions字段的QuizType表单示例作为CollectionType但是可以根据您的逻辑进行随意调整。 基本配置 在QuizType中 首先,将allow_add和allow_delete设置为true。 $ builder -> add ( '...
一个JavaScript库,可基于一个或多个字段的值显示/隐藏表单元素。 好处 轻巧而快速。 带有许多不同的运算符。 支持复杂的条件规则(简单规则和分组规则)。 支持动态表单(在加载DOM之后使用新元素更新的表单)...
一个示例 JavaScript 组合 减少我个人的部分,直到只剩下简单的部分。 搜索“ ”和 JANE DOE 以找到需要为您定制的位。 添加项目 底部有一个 div,您可以根据需要多次复制和粘贴。 “标签”数据字段用于指定它是一...
之前吾辈曾经遇到过这种场景,但当时没有多想直接手撕 JavaScript 列表转树了,并没有想到进行封装。后来遇到的场景多了,想到如何封装树结构操作,但考虑到不同场景的树节点结构的不同,就没有继续进行下去了。 ...
Checkout JS SDK示例该存储库以一个React示例为例,该示例使用来说明如何为BigCommerce商店构建自定义的Checkout解决方案。 请注意,此结帐是一个很好的起点和参考点,但尚未做好生产准备。 由于这是一个示例,因此...
使用中型编辑器mui-mediumeditor的富文本的Material-UI输入字段使用中型编辑器的富文本的Material-UI表单控制输入字段演示这是基于我一直在努力的项目上的一些努力而开始的。 这是有关代码沙箱的演示。 发布该组件后...
用于MongoDB客户端字段级加密的示例“ hello world”代码 此存储库不是受支持的MongoDB产品 注意:在这个仓库的代码示例完全仅用于开发和评估。 请注意,所有使用本地密钥文件的示例仅用于说明目的-出于生产目的,...
Screentime是一个小工具,可帮助您开始根据时间而不是点击量(网页浏览量、访问量等)来考虑您的网站流量。您可以定义页面的区域,称为字段,然后 Screentime 将跟踪每个字段在屏幕上的时间。您还可以使用它来跟踪较...