需求:网页上有个超链接-添加附件,点击添加附件,下面的浏览,删除附件才会出现,否则没有必要出现。
把他们都封装到表格中,比较好看
<table id=”fileid”>
<tr>
<td><a href=”javascript:void(0)” οnclick=”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)’ οnclick=’deleteFile(this)’>删除附件”;
}
function deleteFile(node)
{
var oTrNode=node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
</script>
二、表单校验
思想:当表单失去焦点时,立即校验。(onblur事件就是失去焦点事件)
<form>
用户名:<input type=”text” name=”user” οnblur=”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 οnsubmit=”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=”我的提交” οnclick=”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;
}