大概有个这样的form(表单)
<form name='login' action='login.php' method='post'><input type='text' name='username' value='' />
<input type='password' name='password' value='' />
</form>
<script>
var name = document.login.username.value
/* document.login.username 指向 form name='login'
下面的 input name=username 的值，就是你在input name='username'
写入的值
*/
var pwd=document.login.password.value
/*
同上
*/
document.login.submit()
/*
用户点击loginClick()时候触发document.login的submit方法
submit用于表单提交，相当于下面这个表单的button的作用。
就像你在百度知道提问的时候，写完问题要提交上去submit就是提交表单里的
数据给服务器的。
<form action='login.php' method='post'>
<button type='submit'>条件数据</button>
</form>
*/
</script>
登陆页面 login.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="all.css">
<script src="validate.js"></script>
<script src="login.js"></script>
</head>
<body>
<div class="x-stage">
<form action="#" class="x-form">
<div class="x-field"><label for="e-username" class="x-label">用户名:</label><input id="e-username" name = "username" type="text" class="x-input"/></div>
<div class="x-field"><label for="e-pwd" class="x-label">密码:</label><input id="e-pwd" name="pwd" type="password" class="x-input"/></div>
<input type="button" name="login" value="登陆"/>
<input type="button" name="regist" value="注册"/>
</form>
</div>
</body>
</html>
注册页面 regist.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>regist</title>
<link rel="stylesheet" href="all.css">
<script src="validate.js"></script>
<script src="regist.js"></script>
</head>
<body>
<div class="x-stage">
<form action="#" class="x-form">
<div class="x-field"><font class="x-requirement">*</font><label for="e-username" class="x-label">用户名:</label><input id="e-username" name = "username" type="text" class="x-input"/><div class="x-prompt">2-10位字符 数字和字母均可</div></div>
<div class="x-field"><font class="x-requirement">*</font><label for="e-pwd" class="x-label">密码:</label><input id="e-pwd" name="pwd" type="password" class="x-input"/><div class="x-prompt">6-20位 可以是数字字母或下划线</div></div>
<div class="x-field"><font class="x-requirement">*</font><label for="e-c-pwd" class="x-label">确认密码:</label><input id="e-c-pwd" name="cPwd" type="password" class="x-input"/><div class="x-prompt"></div></div>
<div class="x-field"><font class="x-requirement">*</font><label for="e-mail" class="x-label">电子邮箱:</label><input id="e-mail" name="mail" type="text" class="x-input"/><div class="x-prompt">用于验证和找回密码</div></div>
<div class="x-field"><font class="x-requirement">*</font><label for="e-sex-man" class="x-label">性别:</label><input id="e-sex-man" name="sex" type="radio" class="x-input">男</input><input id="e-sex-woman" name="sex" type="radio" class="x-input">女</input><div class="x-prompt"></div></div>
<input type="button" name="regist" value="注册"/>
</form>
</div>
</body>
</html>
登陆脚本 login.js
window.onload = function(){var form = document.forms[0]
var lastWorkUrl = 'http://www.baidu.com'
form.regist.onclick = function(){
form.action = 'regist.html'
form.submit()
}
form.login.onclick = function(){
if(!validate.checkLogin(form.username.value,form.pwd.value))
return false
form.action = lastWorkUrl
form.submit()
}
}
注册脚本 regist.js
window.onload = function(){var form = document.forms[0]
var lastWorkUrl = 'http://www.baidu.com'
form.regist.onclick = function(){
if( !validate.checkUserName(form.username.value)
|| !validate.checkPwd(form.pwd.value)
|| !validate.checkConfirmPwd(form.pwd.value,form.cPwd.value)
|| !validate.checkMail(form.mail.value))
return false
form.action = lastWorkUrl
form.submit()
}
}
验证脚本 validate.js
var validate = {checkNull:function(value){
if(!value)
return alert('不能为空!'),false
return true
},
checkLogin:function(name,pwd){
if(!name || !pwd)
return alert('输入不正确!'),false
return true
},
checkUserName:function(value){
if(!this.checkNull(value))
return false
if(!/^[A-Za-z0-9]{2,10}$/.test(value))
return alert('2-10位字符 数字字母均可!'),false
return true
},
checkPwd:function(value){
if(!this.checkNull(value))
return false
if(!/^\w{6,20}$/.test(value))
return alert('6-20位 可以是数字字母或下划线!'),false
return true
},
checkConfirmPwd:function(pwd,cpwd){
if(pwd && pwd == cpwd && this.checkPwd(pwd) && this.checkPwd(cpwd))
return true
return alert('确认密码错误!'),false
},
checkMail:function(value){
if(!this.checkNull(value))
return false
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value))
return alert('邮箱格式错误!'),false
return true
}
}
样式表 all.css
.x-stage{
width:400px
margin:100px auto
}
.x-form{
}
.x-field{
margin-bottom: 5px
font-size: 12px
}
.x-label{
font-weight: bold
margin-right: 5px
width: 60px
display: inline-block
vertical-align: middle
}
.x-input{
outline:none
vertical-align: middle
}
.x-prompt{
color : red
font-size: 12px
margin: 5px 0 5px 70px
}
.x-requirement{
color : red
}
如果你希望整个网页都有就在网页空白地方点右键
然后选
页面设置
如果就一个表格加下面那句话的话
把表格和那够话套在一个div块里面
然后给div设个背景就行了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）