<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
form{
350px;
height: 400px;
background-color:#FAEBD7;
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -200px;
font-size:14px;
line-height: 60px;
}
#div1{
margin-top: 50px;
}
span{
display:inline-block;
100px;
height:20px;
text-align:right;
}
#denglu{
position: absolute;
bottom: 30px;
left: 90px;
font-size: 14px;
}
#reset{
position: absolute;
bottom: 30px;
left: 180px;
font-size: 14px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<form action="" method="get" name="myform" onsubmit="return get()">
<div id="div1">
<span>用户名：</span>
<input class="a" type="text" name="username" placeholder="请输入用户名" />
</div>
<div>
<span>密码：</span>
<input class="a" type="password" name="pwd" placeholder="请输入密码" />
</div>
<div>
<span>手机号：</span>
<input type="text" name="tel" placeholder="请输入手机号" />
</div>
<div>
<span>邮箱：</span>
<input type="text" name="email" placeholder="请输入邮箱" />
</div>
<div>
<span>用户协议：</span>
<input onclick="agreeAction()" type="checkbox" name="xuanze[]" />
<a href="#">用户协议</a>
<input type="hidden" name="agree" id="agree" value="0"/>
</div>
<div>
<input id="denglu" type="submit" value="登录" />
<input id="reset" type="reset" />
</div>
</form>
<script>
var ob=/^[d w _]{6,12}$/
var ob1=/^[d w _]{6,20}$/
var ob2=/^1[3578]d{9}$/
var ob3=/^[d]{8,11}@qq.com$/
function agreeAction(){
var agree = document.getElementById('agree').value;
if(agree == 0){
document.getElementById('agree').value = 1;
}else{
document.getElementById('agree').value = 0;
}
}
function get(){
var name=document.myform.username.value;
var pwd=document.myform.pwd.value;
var tel=document.myform.tel.value;
var email=document.myform.email.value;
if(name==""){
alert('请输入用户名');
document.myform.username.focus();
return false;
}
else if(!ob.test(name)){
alert('账号输入不正确请重新输入');
}
if(pwd==""){
alert('请输入密码');
document.myform.pwd.focus();
return false;
}else if(!ob1.test(pwd)){
alert('密码输入不正确请重新输入');
}
if(tel==""){
alert('请输入手机号');
document.myform.tel.focus();
return false;
}else if(!ob2.test(tel)){
alert('手机号输入不正确请重新输入');
}
if(email==""){
alert('请输入邮箱');
document.myform.email.focus();
return false;
}else if(!ob3.test(email)){
alert('邮箱输入错误请重新输入')
}
var agree = document.getElementById('agree').value;
if(agree == 0){
alert('请阅读并且同意用户协议');
return;
}
alert('数据正确，可以提交');
}
</script>
</body>
</html>
正则表达式-表单验证
..