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

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

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

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

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

一、关于标签独有属性

*{list-style:none;}

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

li{list-style:none;}

二、单选按钮能被同时选中

<input type="radio" value="0">男
<input type="radio" value="1">女

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

<input type="radio" name="name" value="0">男
<input type="radio" name="name" value="1">女

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

三、设置样式时发生冲突

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

    <style type="text/css">
        *{margin: 0;padding: 0;}
        input{outline: none;border: none;}
    </style>
<ul>
 <li>
    <label>电话:</label>
    <input id="ipt_phone" type="text" name="name">
 </li>
</ul>
    <script type="text/javascript">
        window.onload=function(){
            var iptPhone=document.getElementById('ipt_phone');
            iptPhone.onblur=function(){
                if(iptPhone.value.length==""){
                    iptPhone.style.borderColor = 'red';
                }
            }
        }
    </script>

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

    <style type="text/css">
        *{margin: 0;padding: 0;}
        input{outline: none;border: 1px solid #000;box-sizing: border-box;}
    </style>
<ul>
 <li>
    <label>电话:</label>
    <input id="ipt_phone" type="text" name="name">
 </li>
</ul>
    <script type="text/javascript">
        window.onload=function(){
            var iptPhone=document.getElementById('ipt_phone');
            iptPhone.onblur=function(){
                if(!iptPhone.value||iptPhone.value===""){
                    iptPhone.style.borderColor = 'red';
                }
            }
        }
    </script>

四、正则g的错误使用

    <style type="text/css">
        *{margin: 0;padding: 0;}
        input{outline: none;border: 1px solid #000;box-sizing: border-box;}
    </style>
<ul>
 <li>
    <label>电话:</label>
    <input id="ipt_phone" type="text" name="name">
 </li>
</ul>
    <script type="text/javascript">
        window.onload=function(){
            var iptPhone=document.getElementById('ipt_phone');
            var re = /^1[34578]\d{9}$/g;
            iptPhone.onblur=function(){
                if(!re.test(iptPhone.value)){
                    iptPhone.style.borderColor = 'red';
                }
                else{
                    iptPhone.style.borderColor='#000';
                }
            }
        }
    </script>

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

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

    <style type="text/css">
        *{margin: 0;padding: 0;}
        input{outline: none;border: 1px solid #000;  
              box-sizing: border-box;}
    </style>
<form id="myform" action="#" method="post">
    <label>电话:</label>
    <input id="ipt_phone" type="text" name="name">
    <input id="ipt_submit" type="submit" name="name">
</form>
    <script type="text/javascript">
        window.onload=function(){
            var myForm=document.getElementById('myform');
            var iptPhone=document.getElementById('ipt_phone');
            var iptSubmit=document.getElementById('ipt_submit');
            var re = /^1[34578]\d{9}$/;
            iptPhone.onkeyup=function(){
                if(!re.test(iptPhone.value)){
                    iptPhone.style.borderColor = 'red';
                }
                else{
                    iptPhone.style.borderColor='#000';
                    iptSubmit.style.backgroundColor='red';
                }
            }
            myForm.onsubmit=function(){
                if(!re.test(iptPhone.value)){
                    return false;
                }
            }
        }
    </script>

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

    <style type="text/css">
        *{margin: 0;padding: 0;}
        input{outline: none;
              border: 1px solid #000;
              box-sizing: border-box;}
        #ipt_submit{width: 50px;height: 20px;
                    background: #ccc;cursor:             
                    pointer;text-align: center;line-height: 20px;}
    </style>
<form id="myform" action="#" method="post">
    <label>电话:</label>
    <input id="ipt_phone" type="text" name="name">
    <div id="ipt_submit" >提交</div>
</form>
    <script type="text/javascript">
        window.onload=function(){
            var iptPhone=document.getElementById('ipt_phone');
            var iptSubmit=document.getElementById('ipt_submit');
            var re = /^1[34578]\d{9}$/;
            iptPhone.onkeyup=function(){
                if(!re.test(iptPhone.value)){
                    iptPhone.style.borderColor = 'red';
                }
                else{
                    iptPhone.style.borderColor='#000';
                    iptSubmit.style.backgroundColor='red';
                }
            }
            iptSubmit.onclick=function(){
                if(!re.test(iptPhone.value)){
                    return;
                }
                //ajax
            }
        }
    </script>
    原文作者:zhou
    原文地址: https://segmentfault.com/a/1190000011154576
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞