Java Web 登录页面的实现代码实例
更新时间：2019年03月25日 14:54:04 作者：如果东京不快乐
这篇文章主要介绍了Java Web 登录页面的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
代码如下~
内有详细解释，最后有照片！
<html>
<script type="text/javascript">
function inUser(){
username_mess.style.visibility="visible";
}
function outUser(){
//获取name 为 usesrname 的文本
u=f1.username.value;
f1.username.style.border="1px solid AAAAAA";
if(u==""){
username_mess.style.visibility="hidden";
return;
}
//正则表达式
reg=/.{4,20}/;
if(!reg.test(u)){
username_mess.innerHTML="用户名长度只能在4-20位字符之间";
username_mess.style.color="red";
f1.username.style.color="red";
f1.username.style.border="1px solid red";
username_ok.style.visibility="hidden";
return;
}
reg=/^[\u4e00-\u9fa5 \w-]{4,20}$/;
if(reg.test(u)){
username_ok.style.visibility="visible";
username_mess.innerHTML="";
f1.username.style.color="black";
}else{
username_mess.innerHTML="用户名只能由中文、英文、数字及'_'、'-'组成";
username_mess.style.color="red";
f1.username.style.color="red";
f1.username.style.border="1px solid red";
username_ok.style.visibility="hidden";
}
}
function inMail(){
mail_mess.style.visibility="visible";
}
function outMail(){
v=f1.mail.value;
f1.mail.style.border="1px solid AAAAAA";
if(v==""){
mail_mess.style.visibility="hidden";
return;
}
reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if(reg.test(v)){
mail_ok.style.visibility="visible";
mail_mess.innerHTML="";
f1.mail.style.color="black";
}else{
//更改id mail_mess 的文字
mail_mess.innerHTML="请输入正确的邮箱地址，例如：X@X.X";
//设置id mail_mess 字体的颜色
mail_mess.style.color="red";
//设置 id 为f1 里的 name 为 mail 文本框 内的文字颜色
f1.mail.style.color="red";
//设置文本框颜色以及框的大小
f1.mail.style.border="1px solid red";
mail_ok.style.visibility="hidden";
}
}
</script>
<!--
以下为 class 标签的 应用函数 +++
-->
<style type="text/css">
.label{
position:absolute ;
right:70%;
}
.fi{
position:relative ;
left:30%;
}
.clr{
height:20px ;
color:AAAAAA;
font-size:12px;
visibility:hidden;
}
.s{
font-weight:lighter ;
color:red;
}
.text{
font-family:宋体;
width:200px;
}
.v{
color:cccccc;
font-size:12px ;
}
a{
font-size:12px ;
}
.btn-img{
position:relative ;
left:30%;
}
.ok{
background-image:url('ok.jpg');
width:17px;
height:16px;
visibility:hidden;
}
</style>
<body>
<form id="f1">
<div class="label"><b class="s">1*</b>用户名：</div>
<div class="fi">
<input type="text" name="username" class="text" tabindex="1" onFocus="inUser()" onBlur="outUser()"/><label id="username_ok" class="ok"><img src="ok.jpg" width=17px height=16px/></label>
<br/><div id="username_mess" class="clr">4-20位字符，可由中文、英文、数字及"_"、"-"组成</div>
</div>
<div class="label"><b class="s">*</b>设置密码：</div>
<div class="fi">
<input type="password" name="pwd" class="text" tabindex="2"/>
<input type="checkbox" name="visi" id="viewpwd"/>
<label class="v">显示密码字符</label><br/>
<div class="clr"></div>
</div>
<div class="label"><b class="s">*</b>确认密码：</div>
<div class="fi">
<input type="password" name="pwd2" class="text" tabindex="3"/>
<br/><div class="clr"></div>
</div>
<div class="label"><b class="s">*</b>邮箱：</div>
<div class="fi">
<input type="text" name="mail" class="text" tabindex="4" onFocus="inMail()" onBlur="outMail()"/>
<label id="mail_ok" class="ok"><img src="ok.jpg" width=17px height=16px/></label>
<label class="v">免费邮箱：</label>
<a href="">搜狐</a>
<a href="">网易</a><br/>
<div id="mail_mess" class="clr">请输入正确的邮箱地址</div>
</div>
<div class="label">推荐人用户名：</div>
<div class="fi">
<input type="text" name="referrer" class="text"
value="可不填" tabindex="5"/>
<br/>
<div class="clr"></div>
</div>
<input type="button" class="btn-img" id="registsubmit"
value="同意以下协议，提交" tabindex="8"/>
</form>
</body>
</html>
以上所述是小编给大家介绍的Java Web 登录页面的实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要给大家介绍了关于如何利用Java输出链表中倒数第k个结点的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用java具有一定的参考学习价值,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了浅谈Java平台无关性，对此感兴趣的同学，可以多了解一下2021-04-04
windows命令行中java和javac、javap使用详解(java编译命令)
最近重新复习了一下java基础，这里便讲讲对于一个类文件如何编译、运行、反编译的。也让自己加深一下印象2014-03-03
在JPA中，@ElementCollection注解主要用于映射集合属性，例如List、Set或数组等集合属性，以及Map结构的集合属性，每个属性值都有对应的key映射，这篇文章主要介绍了JPA中@ElementCollection使用,需要的朋友可以参考下2023-11-11
SpringBoot Admin集成诊断利器Arthas示例实现
这篇文章主要为大家介绍了SpringBoot Admin集成诊断利器Arthas示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了你真的了解java单例模式了吗?实际上单例模式有着好几个变种，并且多线程中涉及到线程安全问题，,需要的朋友可以参考下2019-06-06
Spring事务包括声明式事务管理和注解式事务管理，我们通过概念和小demo的形式一步一步地来一起学习这个知识点,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了新版POI获取日期类型cell值过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要介绍了析JAVA Synchronized关键字的相关知识，文中代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-06-06
下面小编就为大家分享一篇基于solr全文检索实现原理详谈，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
最新评论