前端表单处理

最新推荐文章于 2024-06-13 08:10:56 发布
最新推荐文章于 2024-06-13 08:10:56 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013266600/article/details/55005131
版权

建立必须填写的字段

在填写表单时，编码人员希望指定用户必须填写某些字段，然后才能提交表单，可以使用jS代码来检查某些或者所有字段是否已经填写了。

页面的html代码
<!DOCTYPE html>
<html>
    <head>
        <title>Password Check</title>
        <link rel="stylesheet" href="根据其他字段对字段进行检查.css">
    </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">Chooose 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>
        <script src="根据其他字段对字段进行检查.js"></script>
    </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;
}

此次对label 标签和input 标签定义两个无效的类选择器，即表示标签输入出错时，就选用无效的选择器来处理，以提示用户必须输入。

页面的JS代码
window.onload = initForms;
/* 遍历查找页面的所有的form表单*/
function initForms(){
    for(var i=0;i<document.forms.length;i++)
    {
        document.forms[i].onsubmit=validForm; 
    }
}
/*查找系统中所有的input标签并对标签进行进一步处理*/
function validForm()
{
    var allGood=true;
    var allTags=document.getElementsByTagName("input");
    for(var i=0;i<allTags.length;i++)
    {
        if(!validTag(allTags[i],allGood))
        {
            allGood=false;
        }
    }
    return allGood;
}
/*处理相应标签中的类选择器*/
function validTag(thisTag,allGood)
{
    var outClass="";
    var allClasses=thisTag.className.split(" ");
    for(var j=0;j<allClasses.length;j++)
    {
        outClass+=validBasedOnClass(allClasses[j],thisTag,allGood)+" ";
    }
    thisTag.className=outClass;
    if(outClass.indexOf("invalid") >-1)
    {
        thisTag.focus();
        if(thisTag.nodeName == "INPUT")
        {
            thisTag.select();
        }
        return false;
    }
    return true;
}
function validBasedOnClass(thisClass,thisTag,allGood)
{
    var classBack="";
    switch(thisClass)
    {
        case "":
        case "invalid":
            break;
        case "reqd":
            if(allGood && thisTag.value =="")
            {
                classBack="invalid ";
            }
            classBack +=thisClass;
            break;
        default:
            classBack +=thisClass;
    }
    return classBack;
}

可以看到，这是动态给标签添加类选择器，然后在渲染界面的同时，重新使用选择器加载。

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

比如：要求用户输入密码时，为了确保用户输入密码正确，使得用户输入两次密码，并且确保两次输入完全相同。
还是使用上述html代码和css代码，加入几行js 代码即满足需求。

window.onload = initForms;
/* 遍历查找页面的所有的form表单*/
function initForms(){
    for(var i=0;i<document.forms.length;i++)
    {
        document.forms[i].onsubmit=validForm; 
    }
}
/*查找系统中所有的input标签并对标签进行进一步处理*/
function validForm()
{
    var allGood=true;
    var allTags=document.getElementsByTagName("input");
    for(var i=0;i<allTags.length;i++)
    {
        if(!validTag(allTags[i],allGood))
        {
            allGood=false;
        }
    }
    return allGood;
}
/*处理相应标签中的类选择器*/
function validTag(thisTag,allGood)
{
    var outClass="";
    var allClasses=thisTag.className.split(" ");
    for(var j=0;j<allClasses.length;j++)
    {
        outClass+=validBasedOnClass(allClasses[j],thisTag,allGood)+" ";
    }
    thisTag.className=outClass;
    if(outClass.indexOf("invalid") >-1)
    {
        thisTag.focus();
        if(thisTag.nodeName == "INPUT")
        {
            thisTag.select();
        }
        return false;
    }
    return true;
}
function validBasedOnClass(thisClass,thisTag,allGood)
{
    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);
}**

一定很奇怪指定标签在哪里吧？

<p> <label for="passWd2">Verify password:<input type="password"  id="passWd2" **class="reqd passwd1"**></label></p>

上述class 属性就已经指定标签啦，很神奇吧~~~

标识有问题的字段

将输入字段的边框改成红色是很不错的，但是如果能够让有问题的字段再醒目一点就更好啦。
还是使用上述html代码和css代码，加入几行js 代码即满足需求。

window.onload = initForms;
/* 遍历查找页面的所有的form表单*/
function initForms(){
    for(var i=0;i<document.forms.length;i++)
    {
        document.forms[i].onsubmit=validForm; 
    }
}
/*查找系统中所有的input标签并对标签进行进一步处理*/
function validForm()
{
    var allGood=true;
    var allTags=document.getElementsByTagName("input");
    for(var i=0;i<allTags.length;i++)
    {
        if(!validTag(allTags[i],allGood))
        {
            allGood=false;
        }
    }
    return allGood;
}
/*处理相应标签中的类选择器*/
function validTag(thisTag,allGood)
{
    var outClass="";
    var allClasses=thisTag.className.split(" ");
    for(var j=0;j<allClasses.length;j++)
    {
        outClass+=validBasedOnClass(allClasses[j],thisTag,allGood)+" ";
    }
    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,thisTag,allGood)
{
    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);
}
/*对有问题的字段标签加上相应的类选择器*/
**function invalidLabel(parentTag)
{
    if(parentTag.nodeName == "LABEL")
    {
        parentTag.className+=" invalid";

    }
}**

总结完毕，欢迎指正！！！

laola的故事
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
6个非常精美的Web前端表单提交以及搜索框（三）
08-18
在线效果：http://ynif.v099.10000net.cn/demo/biaodan/3/biaodan/index.html
【前端开发总结】表单操作系列
发现问题，面对问题，分析问题，解决问题，总结问题
09-11 1832
文章目录（一）常用操作整理（1）Select标签操作1. 基础操作2. 添加/删除Select的Option项（2）多选框checkbox1. 常用操作（3）文本框text1. 常用操作（4）表达控件属性操作（5）隐藏input的三种方法和区别（6）Jquery获取form表单中的数据（二）动态组件和标签（1）动态调整标签组件位置样式1. jQuery语法——移动节点，改变节点顺序2. 【案例】移动节点（三）实践整理（1）多表单合并提交 （一）常用操作整理 （1）Select标签操作 1. 基础操作 $(
听说在 Vue 3 中实现动态表单很难？作为一个前端开发者，表示一切都是小意思！！...
最新发布
frontend_frank的博客
06-13 141
点击上方蓝字关注我们大家好，我是CodeQi！最近，我的老板给我布置了一个任务：实现一个用户可以随时增删字段的动态表单。你知道的，作为一个前端开发者，我平时和表单关系可不算好，这次的任务无疑是向我发起了挑战。于是，我带上了 Vue 3 这个利器，开始了我的动态表单征程。接下来，我会带着大家一起从入门到精通，深入了解如何在 Vue 3 中实现动态表单。介绍动态表单是一种允许用户根据需求动态调整...
前端之 form 详解
fenglepeng的博客
01-12 4380
认识表单 在一个页面上可以有多个form表单，但是向web服务器提交表单的时候，一次只可以提交一个表单。 要声明一个表单，只需要使用 form 标记来标明表单的开始和结束，若需要向服务器提交数据，则在form标签中需要设置action属性（用来设置提交表单的位置）、method属性（用来定义浏览器将表单中的信息提交给服务器端程序的处理方式）、target属性（用来指定服务器返回结果所显示的目标窗口或目标框架）；但是，对于客户端脚本编程来说，并不需要这些属性来帮助提交表单信息，form标签存在的意义是在于
表格数据前端做缓存
Xue_BT的博客
11-01 1082
在获取数据的方法中接受一个参数，用来标识需不需要清空数据（如果是操作完成需要刷新数据就传这个参数，如果是简单的切换tabs标签页就不需要传）//1. 第一步 读取数据// 读取缓存中的数据// 如果不需要刷新数据，就会从缓存中读取数据if (data!return// 如果需要重新获取数据，先将缓存中的数据清空}...}如果此时是第一次获取数据，或者需要重新获取数据，就调用相应接口获取数据，并将其存储到本地...// 第二步 获取数据并存储// 如果没有缓存的数据if(!
html前端开发-----表单form
m0_51272779的博客
04-22 693
html前端开发-----表单form 基础案例 0基础入门
前端学习 FreeCodeCamp html 注册表单
03-20
1. `<form>`标签：这是表单的容器，用于定义表单的行为和数据处理方式。例如： ```html ``` 这里的`action`属性指定了处理表单数据的服务器端脚本，`method`属性定义了数据传输的方式，通常是`get`或`post`。 ...
jQuery前端UI框架表单样式代码
06-24
在本资源"jQuery前端UI框架表单样式代码"中，我们聚焦于jQuery如何与前端UI设计相结合，特别是针对表单元素的样式定制和交互效果。 表单是网页中不可或缺的部分，用于收集用户输入数据。传统的HTML表单样式往往单调...
js前端表单验证
01-04
总的来说，JS前端表单验证是一个涉及多方面技术的综合应用，包括DOM操作、事件处理、正则表达式、自定义函数以及第三方库的使用。理解并熟练掌握这些知识点，能够帮助开发者构建出更健壮、更易用的前端表单。
面向设计的AXUI前端框架表单
07-24
【标题】：“面向设计的AXUI前端框架表单”是一个专为用户界面设计打造的前端开发工具，它集成了表格、列表和弹窗等多种组件，旨在提供高效且美观的表单设计解决方案。这款框架旨在简化前端开发过程，提高开发者的...
前端之表单
apf49810的博客
03-06 93
表单是用来收集或者提交用户信息的功能性标签，分为提交、搜索、输入、选择、文本行输入等。由一对<form></form>标签构成。form标签里面包含了name、method、action、target。 form标签属性： name：提交请求的名称； method：提交方式：有GET、POST两种方式； action：显示处理请求的程序； ...
表单设计器 开源程序
07-21
表单设计器 开源程序，可以实现拖拽效果！winform程序
前端——表单
Anansoul的博客
01-01 342
现实中的表单是当我们填写信息表的时候会出现的一种，而网页中的表单是向服务器提交信息的 用标签来创建表单，表单必须有两个属性就是action和method action表示提交到表单服务器中的地址 method表示提交表单的方法 文本框： 在文本框中会出现提示性文字：placeholder="" 账户: 密码: ...
前端编程之路一一form表单标签（详解）
weixin_53144068的博客
12-07 1965
<form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 <form method="传送方式" action="服务器文件"> </form>定义供用户输入的html表单 method ： 数据传送的方式（get/post）; action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php) 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form&
前端，表单基础知识详解
左眼回忆的博客
10-30 406
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" href="表单.css"&gt; &lt;title&gt;&lt;/title&gt; &
前端表单编程
zxnth的博客
12-10 241
什么是表单元素 在HTML中表单元素指form标签，它的作用是把用户输入或者选择的信息提交给后台。 <form action="#" method="post" enctype="application/x-www-form-urlencoded"> </form> form标签的属性： action：表单提交地址 method：提交方式 enctype：数据传递的方式...
前端基础（9）：表单、表格书写方法（后台管理系统）
Quick_only的博客
08-29 956
1、表单高级用法 2、表格高级用法 3、BFC的概念及应用场景
前端第十课--表单
weixin_44374938的博客
02-21 325
前端第十课–表单 **表单：**网页注册登录页面、信息调查问卷、搜索引擎的输出框 **form表单域:**浏览器在网页山专门用来划分出来一个用来划分出一个用来存储表单元素的区域 1.form是块元素 2.form标签的action属性内部是一个链接，只想的是提交表单时向哪个服务器地址发送表单数据。 3.form标签的method属性内部存储着该表单向目标服务器传输数据时采用的哪种法式,有get和p...
拯救老项目-表单暂存与还原
大转转FE
12-28 788
背景最近接到一个需求，公司内部的OA系统（后端人员基于jQuery开发），需要给所有的表单增加暂存与还原功能。具体来说就是对于系统内的任何表单，都增加一个暂存按钮，用户填写到一半，...
html注册前端表单提交
01-10
当用户想要在网页上进行注册时，通常需要填写一系列的信息，比如用户名、密码、邮箱等等。而这些信息是通过前端表单来收集的。 在HTML中，创建一个注册的前端表单非常简单。首先，我们需要使用```<form>```标签来创建一个表单，然后在表单中使用```<input>```标签来添加不同的输入框，比如文本框、密码框、邮箱框等等。每个输入框都有一个```name```属性，用来标识这个输入框的名称。 当用户填写完表单后，他们可以点击表单中的提交按钮，这将触发表单的提交事件。在HTML中，这通常是通过```<input type="submit">```来实现的。 一旦用户点击了提交按钮，表单中的数据将被发送到服务器端进行处理。通常这时候会使用后端的代码来保存这些数据，比如将用户信息存储到数据库中。 总的来说，HTML提供了一种简单且灵活的方式来收集用户的信息并进行注册。通过创建一个前端表单，并在表单中添加相应的输入框和提交按钮，用户可以方便地填写并提交注册信息，使整个注册过程变得非常顺畅。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值