学了这么久的前端,一直没有具体总结自己的经验,只有一些记录在笔记的零星经验,今天来这里说说我在初次编写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>