js验证符合用户体验的网页表单特效

</p> <p><title>js+css实现的一种交互<a href="https://www.kunjuke.com/tag/1001/" title="体验" target="_blank">体验</a></title> </p> <p>@charset "utf-8";<br /> /*元素初始值*/<br /> html {background: #fff;}<br /> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin: 0px;padding: 0px;}<br /> p{cursor: text;}<br /> h1,h2,h3,h4,h5,h6{font-size:100%;}<br /> ol,ul{list-style-type: none;}<br /> address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}<br /> table{border-collapse:collapse;}<br /> fieldset,img{border:0;}<br /> img{display:block;}<br /> caption,th{text-align:left;}<br /> body{position: relative;font-size:62.5%;font-family: "宋体"}<br /> a{text-decoration: none;}<br /> /*demo所用元素值*/<br /> #need {margin: 20px auto 0;width: 610px;}<br /> #need li {height: 26px;width: 600px;font: 12px/26px arial, helvetica, sans-serif;background: #ffd;border-bottom: 1px dashed #e0e0e0;display: block;cursor: text;padding: 7px 0px 7px 10px!important;padding: 5px 0px 5px 10px;}<br /> #need li:hover,#need li.hover {background: #ffe8e8;}<br /> #need input {line-height: 14px;background: #fff;height: 14px;width: 200px;border: 1px solid #e0e0e0;vertical-align: middle;padding: 6px;}<br /> #need label {padding-left: 30px;}<br /> #need label.old_password {background-position: 0 -277px;}<br /> #need label.new_password {background-position: 0 -1576px;}<br /> #need label.repassword {background-position: 0 -1638px;}<br /> #need label.email {background-position: 0 -429px;}<br /> #need dfn {display: none;}<br /> #need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 7px;color: #676767;} </p> <p>function suckerfish(type, tag, parentid) {<br /> if (window.attachevent) {<br /> window.attachevent("onload", function() {<br /> var sfels = (parentid==null)?document.getelementsbytagname(tag):document.getelementbyid(parentid).getelementsbytagname(tag);<br /> type(sfels);<br /> });<br /> }<br /> }<br /> hover = function(sfels) {<br /> for (var i=0; i<sfels.length; i++) {<br /> sfels[i].onmouseover=function() {<br /> this.classname+=" hover";<br /> }<br /> sfels[i].onmouseout=function() {<br /> this.classname=this.classname.replace(new regexp(" hover\\b"), "");<br /> }<br /> }<br /> }<br /> suckerfish(hover, "li"); </p> <ol id="need"> <li><label class="old_password">原始密码：</label> </li> <li><label class="new_password">新的密码：</label> <dfn>（密码长度为6~20字节。不想修改请留空）</dfn></li> <li><label class="repassword">重复密码：</label> </li> <li><label class="email">邮箱设置：</label> <dfn>（codemoz! 承诺绝不会给您发送任何垃圾邮件。）</dfn></li> </ol> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]