- 浏览: 114759 次
- 性别:
- 来自: 广西
文章分类
最新评论
-
greemqqran:
这方法 源码,是怎么的哦?
可变参数,数组与集合之间的转换 -
greemqqran:
Arrays.asList
可变参数,数组与集合之间的转换 -
ricoyu:
引用? super E:接收的是E类型对象应该是: ? sup ...
泛型-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> table{ border:#0066FF 1px solid; width:600px; border-collapse:collapse; } table td,table th{ border:#0066FF 1px solid; padding:10px; } table td{ background-color:#FFFF99; } table th{ background-color:#FF9900; } #repswspan{ margin-left:110px; } .errorinfo{ color:#FF0000; display:none; } .focus{ border:#0099FF 2px solid; } .norm{ border:#999999 1px solid; } .error{ border:#FF0000 2px solid; } </style> <script type="text/javascript"> function inputColor(input) { input.className = "norm"; input.onfocus = function() { this.className = "focus"; } } window.onload = function() { with(document.forms[0]) { inputColor(user); inputColor(psw); inputColor(repsw); inputColor(mail); } } //校验方法。 function check(inputNode,regex,divId) { var b = false; var divNode = document.getElementById(divId); if(regex.test(inputNode.value)) { inputNode.className = "norm"; divNode.style.display = "none"; b = true; } else { inputNode.className = "error"; divNode.style.display = "block"; } return b; } /* //校验用户名,老式!,麻烦!,已过气。 function checkUserDemo(userNode) { var value = userNode.value; var regex = /^\w{3,5}$/; var divNode = document.getElementById("userdiv"); if(regex.test(value)) { userNode.className = "norm"; divNode.style.display = "none"; } else { userNode.className = "error"; divNode.style.display = "block"; } } */ //校验用户名 function checkUser(userNode) { var regex = /^\w{3,5}$/; return check(userNode,regex,"userdiv"); } //校验密码 function checkPsw(pswNode) { var regex = /^[a-z0-9]{3,5}$/i; return check(pswNode,regex,"pswdiv"); } //校验确认密码 function checkRepsw(repswNode) { var b = false; var value1 = repswNode.value; var value2 = document.getElementsByName("psw")[0].value; var divNode = document.getElementById("repswdiv"); if(value1==value2) { repswNode.className = "norm"; divNode.style.display = "none"; b = true; } else { repswNode.className = "error"; divNode.style.display = "block"; } return b; } //校验mail function checkMail(mailNode) { var regex = /^\w+@\w+(\.\w+)+$/; return check(mailNode,regex,"maildiv"); } //校验表单 function checkForm(formNode) { with(formNode) { if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail)) event.returnValue = true; else event.returnValue = false; } } </script> </head> <body> <!-- 1,定义页面 通过表格来格式化表单。 表格行都有一个自己的背景颜色。 将单元格中的数据通过div进行封装。以便操作。 2,定义样式。 表格的样式。 div的样式。 3,动态效果。 3.1在页面加载时,将所有的输入框默认的框线颜色以及定义获取焦点时的框线颜色。 3.2进行内容校验。可以通过正则表达式完成,并通过框线的样式给用户提示。 通过对刚才用户名的校验的分析,发现代码重复度很高,为了提高复用性。 将不同的内容错误参数传递,将相同的内容进行函数的封装。 --> <form onsubmit="checkForm(this)"> <table> <tr> <th>注册表单</th> </tr> <tr> <td> <div>用户名</div> <div><input type="text" name="user" onblur="checkUser(this)" /></div> <div class="errorinfo" id="userdiv">用户名错误,请按要求输入</div> <div>用户名必须是3-5位,由字母(a-z),数字(0-9),下划线(_)组成</div> </td> </tr> <tr> <td> <div><span>密码</span> <span id="repswspan">确认密码</span></div> <div> <input type="password" name="psw" onblur="checkPsw(this)" /> <input type="password" name="repsw" onblur="checkRepsw(this)" /> </div> <div class="errorinfo" id="pswdiv">密码格式错误,请按规范输入</div> <div class="errorinfo" id="repswdiv">两次密码输入不一致</div> <div>密码必须是3-5位,由字母(a-z),数字(0-9),组成</div> </td> </tr> <tr> <td> <div>邮件地址</div> <div><input type="text" name="mail" onblur="checkMail(this)" /></div> <div class="errorinfo" id="maildiv">邮箱地址错误,请按要求填写</div> </td> </tr> <tr> <th> <input type="submit" value="提交数据" /> </th> </tr> </table> </form> </body> </html>
发表评论
-
javascript中的call和apply
2012-11-17 16:34 742javacript中有很多简写的方式,其实我们调用函数的 ... -
javascript中的this
2012-11-16 15:33 669javascript中的this到底是什么呢? 一般来 ... -
javaScript NameSpace
2011-08-22 01:53 776命名空间,一看就知道主要目的是为了避免冲突。下面就来说一下 ... -
表单检验
2011-08-11 23:27 825<!DOCTYPE html PUBLIC " ... -
类似于邮件管理,具有全选,反选功能的代码
2011-08-10 22:33 809<!DOCTYPE html PUBLIC " ... -
增加文件
2011-08-10 22:11 774<!DOCTYPE html PUBLIC " ... -
二级级联下拉菜单
2011-08-10 21:57 638<!DOCTYPE html PUBLIC " ... -
示例思路
2011-08-10 21:31 906<!-- DOM编程: 1, ... -
浮动的广告代码
2011-08-10 20:07 740<!DOCTYPE html PUBLIC " ... -
DHTML编程的一般过程
2011-08-10 19:08 755<!DOCTYPE html PUBLIC " ... -
下拉列表框onchange事件
2011-08-10 18:49 2061<!DOCTYPE html PUBLIC " ... -
checkBox全选实现
2011-08-10 18:41 690<!DOCTYPE html PUBLIC " ... -
每行间隔显示颜色
2011-08-10 18:33 882<!DOCTYPE html PUBLIC " ... -
排序表格内容
2011-08-10 18:25 971<!DOCTYPE html PUBLIC " ... -
列表收缩
2011-08-10 12:20 770<!DOCTYPE html PUBLIC &qu ... -
动态创建表格,删除行列
2011-08-10 12:18 826<!DOCTYPE html PUBLIC &qu ... -
DOM简介
2011-08-07 12:55 661DOM(document Object model)文档对象模 ... -
javascript简介
2011-08-06 23:15 725JavaScript 概述 JavaScript是 ... -
CSS简介
2011-08-05 23:57 865CSS介绍 CSS是层叠样式表(Cascading Styl ... -
HTML
2011-08-05 17:46 787html:超文本标记语言。 html语言中是由标签组成的。 ...
相关推荐
网上常见的用JS编写的注册表单验证的代码,非常实用哦
简介:jQuery带背景自动切换美观大方登录注册表单是一款带全屏背景自适应自动切换的登录注册表单特效,支持表单验证。 简介:jQuery带背景自动切换美观大方登录注册表单是一款带全屏背景自适应自动切换的登录注册...
html网页用户注册表单验证校验JavaScript源码代码,完整代码已经打包,还迎下载,代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...
简单的网页用户注册表单的校验,提供给大家学习,借鉴,完整代码已经打包,欢迎下载。截取一部分代码,如下: function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//...
css3用户体验注册表单
javascript实现仿京东注册表单,能够实现表单验证,正则匹配,表单验证追踪,随机验证码生成,密码强弱校验等功能。
用户注册表单验证(Ajax验证),Ajax写的,注册表单验证。
功能介绍:jQuery多功能注册表单验证插件代码,能够验证几乎所有字段,让你自定义错误提示的长度,提示内容,提示字体颜色,还能与php动态验证手机号或者用户名在数据库是否存在,还能验证身份证是否输入正确,还能配合短信...
jQuery手机移动端注册表单验证代码
jquery表单验证实例网站会员注册表单验证提交form表单代码
这是一款效果非常酷的分步式用户注册表单UI界面设计效果。在这个设计中简单的将用户注册分为3个步骤,用户填写完每一个步骤的信息后可以点击“下一步”按钮跳转到下一个步骤,也可以通过“前一步”按钮来查看前面的...
带验证的分步式注册表单带验证的分步式注册表单带验证的分步式注册表单带验证的分步式注册表单
vue登录注册表单切换,实现登录注册的一些切换,采用的vue.min.js ,可以用来做简单的学习用
jquery高级注册表单
html页面,js事件,实现注册表单的实时验证和提交验证,自己改改就能用,还有使用说明和正则表达式文档供参考
注册表单验证网页特效 注册表单验证网页特效
一个注册表单(文本框、单选按钮、复选框、下拉列表、文本域……) JavaScript验证
jQuery网页注册表单验证代码是一款简单的设置blur属性进行注册表单元素验证网页特效。
jquery注册验证实例会员注册表单验证代码