<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>正则表达式作业.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#main {
font-family:微软雅黑;
width: 1200px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
height: auto;
}
#headerleft {
height: 60px;
float: left;
width: 200px;
}
#headerright {
margin-top: 30px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: right;
overflow: hidden;
}
label{
color:red;
display: none;
}
hr{
clear:both;
padding:0px;
line-height:0px;
}
#form {
width: 800px;
margin: auto;
}
.inputs {
width: 200px;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.buttons{
font-size:15px;
padding: auto;
height:27px;
width:60px;
}
</style>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript">
function check() {
var username = $("#username").val();
var pwd = $("#password1").val();
var repwd = $("#password2").val();
//用户名格式验证
var regUsername=/^[a-zA-Z\xa0-\xff_][0-9a-zA-Z\xa0-\xff_]{7,14}$/;
if (regUsername.test(username) == false) {
$(function(){
$("#label1").show();
});
return false;
}else{
$(function(){$("#label1").hide();});
}
//密码格式验证
var regPwd=/^[0-9a-zA-Z\xa0-\xff_][0-9a-zA-Z\xa0-\xff_]{5,14}$/;
if (regPwd.test(pwd) == "") {
$(function(){
$("#label2").show();
});
return false;
}else{
$(function(){$("#label2").hide();});
}
//前后密码是否一致验证
if (repwd != pwd) {
$(function(){
$("#label3").show();
});
return false;
}else{
$(function(){$("#label3").hide();});
}
return true;
}
$(document).ready(function() {
$("#myform").submit(function() {
return check();
});
});
</script>
</head>
<body>
<div id="main">
<div id="header">
<div id="headerleft">
<h3>用户注册</h3>
</div>
<div id="headerright">登录|注册|帮助</div>
<div><hr></div>
</div>
<div id="form">
<form action="success.html" method="post" id="myform" name="myform">
<table>
<tr>
<td class="right">用户名：</td>
<td><input type="text" id="username" class="inputs" value="" /></td>
<td><label id="label1">用户名不能少于8位，多于15位，开头不能为数字!</label></td>
</tr>
<tr>
<td class="right">密码：</td>
<td><input type="password" id="password1" class="inputs" value="" /></td>
<td><label id="label2">密码不能少于6位，多于15位!</label></td>
<tr>
<td class="right" >确认密码：</td>
<td><input type="password" id="password2" class="inputs" value="" /></td>
<td><label id="label3">前后密码必须一致!</label></td>
</tr>
<tr>
<td class="center" colspan="2"><input type="submit"
value="登录" id="sub" class="buttons" /></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>