自学前端的小白之初次编写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>