黑马程序员-DOM(第八讲,添加删除附件)
来源:互联网 发布:中国大数据V4.0发布 编辑:程序博客网 时间:2024/04/29 23:22
需求:网页上有个超链接-添加附件,点击添加附件,下面的浏览,删除附件才会出现,否则没有必要出现。
把他们都封装到表格中,比较好看
<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;
}
- 黑马程序员-DOM(第八讲,添加删除附件)
- Dom编程(添加、删除附件)
- 黑马程序员-Oracle(第八讲)
- 黑马程序员-DOM(第一讲)
- 黑马程序员-DOM(第二讲)
- 黑马程序员-DOM(第三讲)
- 黑马程序员-DOM(第四讲)
- 黑马程序员-DOM(第五讲)
- 黑马程序员-DOM(第六讲)
- DOM(三)-06-(示例-添加删除附件)
- 黑马程序员-DOM(第七讲下拉菜单-选择城市)
- (16)添加附件、删除附件
- 添加附件、删除附件
- 黑马程序员-第八季dom的一些手写笔记
- 黑马程序员-第八(异常)
- 动态添加、删除附件
- 彩信附件添加删除
- 彩信附件添加删除
- 黑马程序员-DOM(第六讲)
- 1002
- 曝N游戏嫩模疑被阔少包养 大尺度自摸照流出
- 黑马程序员-DOM(第七讲下拉菜单-选择城市)
- 69.windbg-.browse(打开一个新的command 窗口)
- 黑马程序员-DOM(第八讲,添加删除附件)
- linux 查看磁盘分区格式
- Objective-C中的SEL的用法
- Android开发之EditText文本编辑框的使用
- PL/SQL developer导出oracle存储过程
- GridView中DataKeyNames的应用小结
- WPF布局学习
- FileZilla 搭建 Ftp 服务器
- vim 使用点滴记录