黑马程序员-DOM（第八讲，添加删除附件）

需求：网页上有个超链接-添加附件，点击添加附件，下面的浏览，删除附件才会出现，否则没有必要出现。

 

把他们都封装到表格中，比较好看

<table id=”fileid”>

<tr>

<td><a href=”javascript:void(0)”  onclick=”addFile()”>添加附件</a></td>

</tr>

<tr>

<td><input type=”file”/></td> //现在要动态生成下面的内容，所以下面的内容应该去掉

<td><a href=”javascript:void(0)”>删除附件</a></td>

</tr>

</table>

 

<style type=”text/css”>

talbe a:link,table a:visited{

color:#179ed9;  //设置当链接最近没有访问过时，和最近访问过时链接的样式

text-decoration:none;//去掉超链接的下划线

}

table a:hover{

color:#f36021;//设置当鼠标移动到链接上时，链接的样式

}

</style>

 

<script type=”text/javascript”>

function addFile()

{

//因为文件选取框定义在行对象中，所以只要给表格创建新的行和单元格即可。

var oTabNode=document.getElementById(“fileid”);

var oTrNode=oTabNode.insertRow();

var oTdNode_file=oTrNode.insertCell();

var oTdNode_del=oTrNode.insertCell();

oTdNode_file.innerHTML=”<input type=’file’/>”;

oTdNode_del.innerHTML=”<a href=’javascript:void(0)’ onclick=’deleteFile(this)’>删除附件”;

 

}

function deleteFile(node)

{

var oTrNode=node.parentNode.parentNode;

oTrNode.parentNode.removeChild(oTrNode);

}

</script>

 

 

二、表单校验

思想：当表单失去焦点时，立即校验。（onblur事件就是失去焦点事件）

<form>

用户名：<input type=”text” name=”user” onblur=”checkUser()”/>

<span id=”userspan”></span>

</br>

输入密码：<input type=”text” name=”psw”/></br>

</form>

 

<script type=”text/javascript”>

function checkUser()

{

var flag;

var oUserNode=document.getElementsByName(“user”)[0];

var name=oUserNode.value;

var oSpanNode=document.getElementById(“userspan”);

if(name=”abc”)

{

oSpanNode.innerHTML=”用户名正确”.fontcolor(“green”);

flag=true;

}

else

{

oSpanNode.innerHTML=”用户名错误”.fontcolor(“red”);

flag=false;

}

return flag;

}

</script>

 

三、正则表达式

定义正则表达式，必须是四个字母

var reg=new RegExp(“^[a-z]{4}$”,’’i”);

注意还有另一种形式：/^[a-z]{4}$/i;

reg.test(name);

注意这里头尾都要加标记^和$,否则将判断的是name中是否包含reg,只要包含就返回true，否则返回false。（这显然不是我们想要的结果）

 

 

四、提交表单

如果我们直接用<from>中的提交

<form>

<input type=”submit” value=”提交数据”/>

</form>

 

如果直接用这个来提交的话，我们设置的正则表达式的验证就失去意义了，因为不管填写的符不符合规范，都会向服务器提交。

 

可以做一下改进：

<form onsubmit=”return checkForm()”>//注意这里，return的如果是true，提交就能使用，如果返回的是false.提交就不能使用。

<input type=”submit” value=”提交数据”/>

</form>

 

<script type=”text/javascript”>

function checkForm()

{

if(checkUser())

{

return true;

}

return false;

}

</script>

 

当然我们可以自己定义按钮，用自定义的按钮来提交表单,注意这种提交方式，必须首先获得<form>标签，然后用<form>标签中的submit()来提交。

不必写在<form>里面

<input type=”button”value=”我的提交” onclick=”mySubmit()”/>

 

function mySubmit()

{

//假如form的id为userinfo

var oFormNode=document.getElementById(“userinfo”);

oFormNode.submit();

}

 

 

 

小结：

发现很多框的校验除了几个内容不同外，校验的过程是一样的，所以进行了代码的提取。

function check(name,reg,sapnId,okinfo,errinfo)

{

var flag;

var val=document.getElementByName(name)[0].value;

var oSpanNode=document.getElementById(spanId);

if(reg.test(val))

{

oSpanNode innerHTML=okinfo.fontcolor(“green”);

flag=true;

}

else

{

oSpanNode.innerHTML=errinfo.fontcolor(“red”);

flag=false;

}

return flag;

}

 

 

function checkUser()

{

var reg=/^[a-z]{4}$/i;

//Check(“user”,reg,”userspan”,”用户名正确”，”用户名错误”);

//改成这种形式，后面有用

return  Check(“user”,reg,”userspan”,”用户名正确”，”用户名错误”);

 

}

 

function checkForm()

{

if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail())/////注意这行代码的处理，（防止出现这么一种情况，当用户输入用户名，密码，确认密码，邮件地址，都正确，正准备提交时，无意间修改了密码输入框中的内容，如果，不这么写，发生这种情况时，也能提交，这就会发生错误）

{

return true;

}

return false;

}