实用HTML小知识点
1.用JavaScriptform表单的验证,有如下表单
<form action="" method="post" οnsubmit="return check_all()">
<table>
<tr>
<td class="weight_b">用户名:</td>
<td><input οnblur="check_name()" type="text"
name="uname" id="uname" maxlength="16"/></td>
<td id="text1"><span>*</span> (英文、汉字、数字、
6-16个字符)</td>
</tr>
<tr>
<td class="weight_b">密码:</td>
<td><input οnblur="check_pwd()" type="password"
name="pwd" id="pwd" maxlength="16" /></td>
<td id="text2"><span>*</span> (6-16个字符)</td>
</tr>
<tr>
<td></td>
<td id="btn"><input type="submit"/></td>
<td></td>
</tr>
</table>
</form>
a.文本框的内容验证,需要JS通过表单元素的name拿到该元素里面的内容,
再将该内容与正则表达式匹配,看是否符合,正确返回true,错误给出提示
(还是先拿到用于显示提示的表单元素对象,在用innerHTMl属性给该对象
填入内容,显示在页面上),例如我们验证用户名长度要大于6:
function check_name(){ var uname=document.getElementById('uname').value; var txt1=document.getElementById('text1') if(uname.length<6){ txt1.innerHTML="<span>◎用户ID长度不够 </span> (英文、汉 字、数字、6-16个字符)"; return false; }else{ txt1.innerHTML="<span>v</span>"; } }
b.表单的提交,表单在用户点击submit按钮后会通过form的method方法提交
到action对应的地址。记得一定要写onsubmit属性,否则表单未提供js验证
也会提交!,例如
function check_all(){ if(check_name()&&check_pwd()){ return true; }else{ return false; } }
2.用css操作元素的display属性可以做下拉菜单,图片切换之类的特效哦
例如,我们在div中有4张图片,4个按钮,代码如下:
<div> <div id="one" style="display:''"><img src="img/a.jpg" alt="" height="300px"/></div> <div id="two" style="display:none"><img src="img/b.jpg" alt="" height="300px"/></div> <div id="three" style="display:none"><img src="img/c.jpg" alt="" height="300px"/></div> <div id="four" style="display:none"><img src="img/d.jpg" alt="" height="300px"/></div> <div id='btn'> <input type="button" id="1th" οnclick="change(1)" value='1'"/> <input type="button" id="2th" οnclick="change(2)" value='2'/> <input type="button" id="3th" οnclick="change(3)" value='3'/> <input type="button" id="4th" οnclick="change(4)" value='4'/> </div> </div>
如何通过点击按钮切换图片呢,由于div的特性,我们只要把按钮对应的图片设置为显示,其他不显示即可。代码如下:
function change(ele){ var div1=document.getElementById('one'); var div2=document.getElementById('two'); var div3=document.getElementById('three'); var div4=document.getElementById('four') if(ele==1){ div1.style.display=''; div2.style.display='none'; div3.style.display='none'; div4.style.display='none'; }else if(ele==2){ div1.style.display='none'; div2.style.display=''; div3.style.display='none'; div4.style.display='none'; }else if(ele==3){ div1.style.display='none'; div2.style.display='none'; div3.style.display=''; div4.style.display='none'; }else if(ele==4){ div1.style.display='none'; div2.style.display='none'; div3.style.display='none'; div4.style.display=''; } }