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

JS+CSS实现的一种交互体验

@charset "utf-8";
/*元素初始值*/
html {background: #FFF;}
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;}
p{cursor: text;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ol,ul{list-style-type: none;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;}
fieldset,img{border:0;}
img{display:block;}
caption,th{text-align:left;}
body{position: relative;font-size:62.5%;font-family: "宋体"}
a{text-decoration: none;}
/*demo所用元素值*/
#need {margin: 20px auto 0;width: 610px;}
#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;}
#need li:hover,#need li.hover {background: #FFE8E8;}
#need input {line-height: 14px;background: #FFF;height: 14px;width: 200px;border: 1px solid #E0E0E0;vertical-align: middle;padding: 6px;}
#need label {padding-left: 30px;}
#need label.old_password {background-position: 0 -277px;}
#need label.new_password {background-position: 0 -1576px;}
#need label.rePassword {background-position: 0 -1638px;}
#need label.email {background-position: 0 -429px;}
#need dfn {display: none;}
#need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 7px;color: #676767;}

function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
hover = function(sfEls) {
for (var i=0; i

  1. 原始密码：
  2. 新的密码： （密码长度为6~20字节。不想修改请留空）
  3. 重复密码：
  4. 邮箱设置： （Codemoz! 承诺绝不会给您发送任何垃圾邮件。）

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 28个JS验证函数收集

    JS验证函数的调用方法和注意: 1.给表单设置onsubmit="return test()",配合<input type="submit" name="Submit" value="check"> 进行提交. 2.<input type=text onkeydown="test();"> //当鼠标按下直接调用函数验证 3.<input type=text onblur=&q

  • Javascript下的keyCode键码值表

    字母和数字键的键码值(keyCode)  按键 键码 按键 键码 按键 键码 按键 键码  A 65 J 74 S 83 1 49  B 66 K 75 T 84 2 50  C 67 L 76 U 85 3 51  D 68 M 77 V 86 4 52  E 69 N 78 W 87 5 53  F 70 O 79 X 88 6 54  G 71 P 80 Y 89 7 55  H 72 Q 81 Z 90 8 56  I 73 R 82 0 48 9 57 数字键盘上的键的键码值(keyC

  • js验证表单第二部分

    说明:JavaScript脚本,验证表单中的数据项  begin  -------------------------------------------------------------------------------  */  function checkForm(objFrm){  var len = 0;  len = objFrm.elements.length;  var i = 0;  var objCheck;  //文本框  for(i = 0; i < len; i +

  • Javascript 键盘keyCode键码值表

    1.字母和数字键的键码值(keyCode) 按键 键码 A 65 B 66 C 67 D 68 E 69 F 70 G 71 H 72 I 73 J 74 K 75 L 76 M 77 N 78 O 79 P 80 Q 81 R 82 S 83 T 84 U 85 V 86 W 87 X 88 Y 89 Z 90 0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57 2.数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode) 按键

  • js验证email的正则

    Untitled Document function $(obj){ return document.getElementById(obj); } function checkEmail() { var str = $("myText").value; //如果为空,则通过校验 if(str == ""){ alert("输入为空"); return; } if (str.charAt(0) == "." || str.cha

  • javascript Keycode对照表

    字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 51 D 68 M 77 V 86 4 52 E 69 N 78 W 87 5 53 F 70 O 79 X 88 6 54 G 71 P 80 Y 89 7 55 H 72 Q 81 Z 90 8 56 I 73 R 82 0 48 9 57 数字键盘上的键的键码值(keyCode) 功能键键码

  • JAVASCRIPT keycode总结

    Keypress 的KeyCode: 小键盘 大键盘 "-" 45 45 "." 46 46 0~9 48~57 48~57 "m" 109 "n" 110 a~z 97~122 "`" 96 a~i 97~105 Keydown 的keycode: 小键盘 大键盘 "m" 77 "n" 78 "-" 109 189 "." 1

  • js验证表单大全

    不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false: */ function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 <256 && R

  • event.keyCode键码值表 附只能输入特定的字符串代码

    event.keyCode键码值表 附只能输入特定的字符串代码

    复制代码 代码如下: <script language="javascript" type="text/javascript"> function onlyNum() { if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39)&&!(event.keyCode==190)

  • JavaScript 键盘event.keyCode值列表大全

    网上收集的KeyCode值方便大家查找: keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode

  • JS验证URL函数 正则

    这个url的正则表达式判断的JavaScript!比较全面的.它验证的情况包括IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!用户名等等信息,貌似作者也是在网上找的,我从一个项目代码中扣出来的,是我见过的最强最全面的url验证方式!太猛了,贴在这里与大家分享,URL的验证实在是很频繁. function IsURL (str_url) { var strRegex = '^((https|http|ftp|rtsp|mms)?://)' + '?(([0-9a-z_!~

  • JavaScript验证用户输入的是字符或数字及ASCII Chart应用

    JavaScript验证用户输入的是字符或数字及ASCII Chart应用

    我们可以根据onkeydown事件的event.keyCode即是ASCII Chart来判断字符或数字等.相关键盘key对应的ASCII码:  参考下面JavaScript代码: 复制代码 代码如下: <script type = "text/javascript"> function isNumeric(keyCode) { return ((keyCode >= 48 && keyCode <= 57) || keyCode == 8) }

  • js keycode快捷键大全 并附有简单使用说明

    复制代码 代码如下: keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = spac

  • 经常用到的javascript验证函数收集第1/3页

    建议大家收藏javascript验证函数,以后遇到就可以直接拿来用了/* ================================================================== 是否为空,只判断字符串 null或0长为空,经过trim IsStringNull(string) ================================================================== */ function IsStringNull(str)

  • JS键盘的键码(event.keyCode)图片版

    JS键盘的键码(event.keyCode)图片版

    图片版:点击看大图 网上收集的KeyCode值方便大家查找: keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Esca

随机推荐