资讯专栏INFORMATION COLUMN

自学前端的小白之初次编写form表单的经验与错误总结

JackJiang / 2283人阅读

摘要:对我这个初学前端的小白来讲,在每次编写标签的时候经常把属性省略掉,经了解标签属性和属性是必须有的。五阻止表单提交以及与互换电话这是当表单不符合要求时,阻止提交表单的代码,但写表单的时候难免会用到,所以要把替换成电话提交

学了这么久的前端,一直没有具体总结自己的经验,只有一些记录在笔记的零星经验,今天来这里说说我在初次编写from表单过程中总结出的东西:

首先我个人认为最难的也是个人认为最重要一点:就是当我们的程序发生问题时该怎么解决?

当编写一段代码的时候,背后总有种种的元素在影响代码的运行效果,而导致错误发生的最具体的原因我把它理解为问题根源,当根源找到之后往往所有的问题都会迎刃而解。那怎么才能找到根源的所在呢?第一问人,第二网上查,第三查书,最后一种笨方法就是把所有的影响到的元素全都找出来,一个一个修改代码排除,往往我们所认为正确的其实它是错误的。

废话少说,下面来看一下我所遇见的问题:

一、关于标签独有属性
*{list-style:none;}

这段代码是我为了省事,把list-style放到了通配符*里面,但这么写不对,list-style是li标签才有的属性,应该针对li把list-style定位到li:

li{list-style:none;}
二、单选按钮能被同时选中

上面代码运行的时候,会发现这两个单选按钮可以同时被选中,原因是input标签少了一个name属性。对我这个初学前端的小白来讲,在每次编写input标签的时候经常把name属性省略掉,经了解input标签name属性和type属性是必须有的。

所以只要在input标签加上name属性就不会发生单选按钮能同时选中的尴尬。

三、设置样式时发生冲突

我想要一个输入框失去焦点的时候,如果里面的内容为空的话,边框变成红色:

    
    

上面的代码并没有实现预期的效果,原因是我之前写样式的时候加了border:none;,还有我在判断时出现了错误,length是用来保存字符串的长度的,不能拿来判断value是否为空,应该这么写才对:

    
    
四、正则g的错误使用
    
    

上面代码是如果输入不正确的电话号码时input失去焦点时边框变红色,但程序运行时我输入正确的电话号码,当input失去焦点时边框变黑色再次得到焦点然后再次失去焦点边框变红色,原因是我在写正则的时候用到了全局匹配g,这里g特点是在匹配成功后会记录匹配成功后的位置,下一次匹配是从上一次匹配成功的末尾位置开始匹配,所以在使用正则匹配时,如果只匹配一个结果时g就不应该出现。

五、阻止表单提交以及submit与div互换
    
    

这是当表单不符合要求时,阻止提交表单的代码,但写表单的时候难免会用到ajax,所以要把submit替换成div:

    
提交
    

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91789.html

相关文章

  • 自学小白初次编写form表单经验错误总结

    摘要:对我这个初学前端的小白来讲,在每次编写标签的时候经常把属性省略掉,经了解标签属性和属性是必须有的。五阻止表单提交以及与互换电话这是当表单不符合要求时,阻止提交表单的代码,但写表单的时候难免会用到,所以要把替换成电话提交 学了这么久的前端,一直没有具体总结自己的经验,只有一些记录在笔记的零星经验,今天来这里说说我在初次编写from表单过程中总结出的东西: 首先我个人认为最难的也是个人认为...

    AaronYuan 评论0 收藏0
  • 自学小白初次编写form表单经验错误总结

    摘要:对我这个初学前端的小白来讲,在每次编写标签的时候经常把属性省略掉,经了解标签属性和属性是必须有的。五阻止表单提交以及与互换电话这是当表单不符合要求时,阻止提交表单的代码,但写表单的时候难免会用到,所以要把替换成电话提交 学了这么久的前端,一直没有具体总结自己的经验,只有一些记录在笔记的零星经验,今天来这里说说我在初次编写from表单过程中总结出的东西: 首先我个人认为最难的也是个人认为...

    cgh1999520 评论0 收藏0
  • 五万字15张导图Java自学路线,小白零基础入门,程序员进阶,收藏这篇就够了

    摘要:本文收录于技术专家修炼文中配套资料合集路线导图高清源文件点击跳转到文末点击底部卡片回复资料领取哈喽,大家好,我是一条最近粉丝问我有没有自学路线,有了方向才能按图索骥,事半功倍。 ...

    suosuopuo 评论0 收藏0
  • 精彩文章大合集- 收藏集 - 掘金

    摘要:发布应用市场的平台抢红包工具红包精灵开源啦掘金红包精灵,如果喜欢,点个开源不易。作者将原素材文章进行了新内容的添加和重新排列,但是因为文章高效的代码编写技巧总结前端掘金本文总结了代码编写技巧,来提升你的和代码。 收藏安卓开发中非常实用优秀的库! 有图有真相! - Android - 掘金本来是打算收藏工具类的,但转念一想,已经有这么多优秀的库了,就没必要再去重复造轮子了,便归纳工作中比...

    ermaoL 评论0 收藏0

发表评论

0条评论

JackJiang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<