<%@ page contentType="text/html;charset=utf-8"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<title>欢迎加入CM</title>
<style type="text/css" media="screen">
.div{
padding: 20px;
width: 600px;
height: 600px;
margin:0 auto ;
position:relative; background-color: #555;
}
img{
width: 80px;
height: 80px;
}
.div .img{
width: 80px;
height: 80px;
position:absolute; left:30px; top:10px;
}
.re{
margin-left: 150px;
text-align: left;
}
.form{
width: 180px;
height: 25px;
margin:5px auto;
}
label{
color: red;
font-size: 12px;
visibility: hidden;
display: none;
}
</style>
<script>
function check() {
var username=document.getElementById('UserName').value;
var nickname=document.getElementById('NickName').value;
var email=document.getElementById('Email').value;
var phone=document.getElementById('PhoneNumber').value;
var password=document.getElementById('Password').value;
var rpassword=document.getElementById('RPassword').value;
var em=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$ /;
var ph=/^(13[0-9]{9})|(15[89][0-9]{8})$/;
var pw=/^[a-zA-Z0-9_]/;
if (username.replace(/(^s*)|(s*$)/g, "").length ==0) {
var label1=document.getElementById('label1');
label1.style.visibility="visible";
label1.style.display="";
}else
if (nickname.replace(/(^s*)|(s*$)/g, "").length ==0) {
document.getElementById('label2').style.visibility="visbile";
document.getElementById('label2').style.display="";
}else
if (email.replace(/(^s*)|(s*$)/g, "").length ==0||em.test(email)) {
document.getElementById('label3').style.visibility="visbile";
document.getElementById('label3').style.display="";
}else
if (phone.replace(/(^s*)|(s*$)/g, "").length ==0||ph.test(phone)) {
document.getElementById('label4').style.visibility="visbile";
document.getElementById('label4').style.display="";
}else
if (password.replace(/(^s*)|(s*$)/g, "").length ==0||pw.test(password)||password.length<6&&password.length>18) {
document.getElementById('label5').style.visibility="visbile";
document.getElementById('label5').style.display="";
}else
if (rpassword!=password) {
document.getElementById('label6').style.visibility="visbile";
document.getElementById('label6').style.display="";
}
}
</script>
</head>
<body>
<div class="div">
<div class="img">
<a href="index.jsp"><img src="images/logo.gif" alt="logo" /></a>
</div>
<div class="re">
<form action="" method="post">
<h2>Welcome TO Join CM</h2>
<p><input type="text" class="form" id="UserName" placeholder="设置用户名"></input><nobr><label id="label1">x不为空</label></nobr></p>
<p><input type="text" class="form" id="NickName" placeholder="设置昵称"></input><nobr><label id="label2">x不为空</label></nobr></p>
<p><input type="text" class="form" id="Email" placeholder="设置Email"></input><nobr><label id="label3">x不为空,Email格式有误</label></nobr></p>
<p><input type="text" class="form" id="PhoneNumber" placeholder="设置手机号"></input><nobr><label id="label4">x不为空,格式有误</label></nobr></p>
<p><input type="text" class="form" id="Password" placeholder="设置密码"></input><nobr><label id="label5">x不为空，6-18位,只能包含数字,字母,下划线</label></nobr></p>
<p><input type="text" class="form" id="RPassword" placeholder="确认密码"></input><nobr><label id="label6">x两次密码不一致</label></nobr></p>
<p><input type="submit" id="button" value="注册" onclick="check()"></input></p>
</form>
</div>
</div>
</body>
</html>
为甚么用js验证表单，style时间太短
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
分享- 邀请回答
-
1条回答
- 普通网友 2016-10-07 17:41关注
="java.sql.*"%>
<!DOCTYPE html>
欢迎加入CM
<br> .div{<br> padding: 20px;<br> width: 600px;<br> height: 600px;<br> margin:0 auto ;<br> position:relative; background-color: #555;<br> }<br> img{<br> width: 80px;<br> height: 80px;<br> }<br> .div .img{<br> width: 80px;<br> height: 80px;<br> position:absolute; left:30px; top:10px; <br> }<br> .re{<br> margin-left: 150px;</p>解决 无用评论 打赏举报 分享
悬赏问题
- ¥15 求daily translation（DT）偏差订正方法的代码
- ¥15 js调用html页面需要隐藏某个按钮
- ¥15 ads仿真结果在圆图上是怎么读数的
- ¥20 Cotex M3的调试和程序执行方式是什么样的？
- ¥20 java项目连接sqlserver时报ssl相关错误
- ¥15 一道python难题3
- ¥15 牛顿斯科特系数表表示
- ¥15 arduino 步进电机
- ¥20 程序进入HardFault_Handler
- ¥15 关于#python#的问题：自动化测试