JavaScript实用示例之根据其他字段对字段进行检查
来源:互联网 发布:纸箱软件 编辑:程序博客网 时间:2024/05/18 09:37
在填写表单时,可能希望指定用户必须填写某些字段,然后才能提交表单。可以使用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基础教程》)
- JavaScript实用示例之根据其他字段对字段进行检查
- 根据value字段对map进行排序
- 根据字段02对字符串进行分行
- php数组根据指定字段对数组进行排序函数
- java根据字段来对集合进行去重
- 根据两个字段进行统计
- 根据某字段的不同属性值对另一字段的值进行合并
- javascript对表单字段进行校验(源代码)
- 对字段内容进行拆分
- PHP对根据某字段对二维数组进行排序函数
- 纯js对根据table中的两个字段对table进行去重操作(精华版)
- 其他字段
- 如何编写一条SQL实现根据某个字段的条件对某个字段进行不同的update操作
- 根据列表中的指定字段进行排序
- 用arcgis根据字段进行分割数据
- Lucene根据字段进行自定义搜索扩展
- 对一个字段中的多个其他表的主键进行查询
- List<Entity>排序:根据javabean中的一个字段对beanList进行排序
- 《基于Web访问信息的用户兴趣迁移模式的研究》笔记
- Linux下编译的一些基本命令
- 行业操作系统示例-汽车操作系统
- Hadoop命令大全
- sublime text 快捷键
- JavaScript实用示例之根据其他字段对字段进行检查
- Linux0.11中系统内存的使用
- .NET页面间传值
- perl 开始 头写法
- 数据库大数据量导出多线程版本
- 查看sqlite是否存在一张表
- android+WM9714(AC97)调试
- 关于c 一元多项式链表的建立和打印
- 文本文件的处理