1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度注册页面</title>
<style>
* {
padding: 0;
margin: 0;
font-size: 12px;
line-height: 25px;
}
.register {
float: none;
width: 503px;
clear: both;
margin: 0px auto;
}
.register dl {
clear: both;
}
.register dt {
width: 120px;
text-align: right;
padding-right: 5px;
float: left;
}
.inputs {
border: 1px solid #333;
width: 120px;
height: 20px;;
}
.register dl dd div {
color: #ff0000;
padding-left: 5px;
display: inline;
}
.btn {
width: 60px;
text-align: center;
height: 26px;
margin: 5px 5px 0 0;
}
</style>
</head>
<body>
<div class="register">
<div class="center"><img src="header1.jpg"/></div>
<form action="success.html" method="post" id="myform">
<dl>
<dt>用户名:</dt>
<dd><input id="user" type="text" class="inputs"/>
<div id="userId"></div>
</dd>
</dl>
<dl>
<dt>密码:</dt>
<dd><input id="pwd" type="password" class="inputs"/>
<div id="pwdId"></div>
</dd>
</dl>
<dl>
<dt>确认密码:</dt>
<dd><input id="repwd" type="password" class="inputs"/>
<div id="repwdId"></div>
</dd>
</dl>
<dl>
<dt>性别:</dt>
<dd><input name="sex" type="radio" value="男"/>男 <input name="sex" type="radio" value="女"/>女
<div id="sexId"></div>
</dd>
</dl>
<dl>
<dt>电子邮件:</dt>
<dd><input id="email" type="text" class="inputs"/>
<div id="emailId"></div>
</dd>
</dl>
<dl>
<dt>出生日期:</dt>
<dd><select id="year">
<script>
for (var i = 1900; i <= 2015; i++) {
document.write("<option value=" + i + ">" + i + "</option>");
}
</script>
</select>年
<select id="month">
<script>
for (var i = 1; i <= 12; i++) {
document.write("<option value=" + i + ">" + i + "</option>");
}
</script>
</select>月
<select id="day">
<script>
for (var i = 1; i <= 31; i++) {
document.write("<option value=" + i + ">" + i + "</option>");
}
</script>
</select>日
</dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="sub" type="submit" value="注册" class="btn"/> <input name="cancel" type="reset" value="清除"
class="btn"/></dd>
</dl>
</form>
</div>
</body>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#user").blur(function () {
var user = $("#user").val();
var userId = $("#userId");
var regUser = /^[a-zA-Z0-9_-]{4,12}$/;
if (user == "") {
userId.html("用户名长度不能为空");
return false;
}
else if (regUser.test(user) == false) {
userId.html("用户名必须由字母、数字和下划线组成");
return false;
}
userId.html("");
return true;
})
$("#pwd").blur(function () {
var pwd = $("#pwd").val();
var pwdId = $("#pwdId");
if (pwd == "") {
pwdId.html("密码不能为空");
return false;
}
else if (pwd.length < 6 || pwd.length > 12) {
pwdId.html("密码长度为6-12字符");
return false;
}
pwdId.html("");
return true;
})
$("#repwd").blur(function () {
var pwd = $("#pwd").val();
var repwd = $("#repwd").val();
var repwdId = $("#repwdId");
if (repwd != pwd) {
repwdId.html("两次输入的密码不一致");
return false;
}
repwdId.html("");
return true;
})
$("input[name='sex']").change(function(){
var sex = $("#myform :checked").val();
var sexId = $("#sexId");
if (sex != '男' && sex != '女') {
sexId.html("请选择性别");
return false;
}else if(sex == '男' || sex == '女'){
sexId.html("");
return true;
}
sexId.html("");
return true;
});
$("#email").blur(function () {
var email = $("#email").val();
var emailId = $("#emailId");
var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if (email == "") {
emailId.html("电子邮箱不能为空");
return false;
}
else if (regEmail.test(email) == false) {
emailId.html("邮箱不正确");
return false;
}
emailId.html("");
return true;
})
$("#myform").submit(function () {
var user = $("#user").val();
var userId = $("#userId");
var regUser = /^[a-zA-Z0-9_-]{4,12}$/;
if (user == "") {
userId.html("用户名长度不能为空");
return false;
}
else if (regUser.test(user) == false) {
userId.html("用户名必须由字母、数字和下划线组成");
return false;
}
userId.html("");
return true;
})
$("#myform").submit(function () {
var pwd = $("#pwd").val();
var pwdId = $("#pwdId");
if (pwd == "") {
pwdId.html("密码不能为空");
return false;
}
else if (pwd.length < 6 || pwd.length > 12) {
pwdId.html("密码长度为6-12字符");
return false;
}
pwdId.html("");
return true;
})
$("#myform").submit(function () {
var pwd = $("#pwd").val();
var repwd = $("#repwd").val();
var repwdId = $("#repwdId");
if (repwd != pwd) {
repwdId.html("两次输入的密码不一致");
return false;
}
repwdId.html("");
return true;
})
$("#myform").submit(function () {
var sex = $("#myform :checked").val();
var sexId = $("#sexId");
var email = $("#email").val();
var emailId = $("#emailId");
var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if (email == "") {
emailId.html("电子邮箱不能为空");
return false;
}
else if (regEmail.test(email) == false) {
emailId.html("邮箱不正确");
return false;
}
emailId.html("");
return true;
})
$("#myform").submit(function () {
var sex = $("#myform :checked").val();
var sexId = $("#sexId");
if (sex != '男' && sex != '女') {
sexId.html("请选择性别");
return false;
}
return true;
})
})
</script>
</html>
2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用正则表达式验证表单内容</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
line-height:20px;
}
.main{
width:900px;
margin: 0 auto;
}
.main dl{clear: both; height: 30px;}
.main dl dt{
text-align:right;
float: left;
width:180px;
height:25px;
padding-right:5px;
}
.inputs{
width:130px;
height:16px;
border:solid 1px #666666;
float:left;
margin-right:5px;
}
.main dl dd div{
display: inline;
margin-left:10px;
color:#F00;
}
</style>
</head>
<body>
<div class="main"><img src="logo.jpg" alt="logo"/>
<form action="success.html" id="myform" method="post">
<dl>
<dt>用户名:</dt>
<dd><input id="user" type="text" class="inputs" onblur="checkUser()" /><div id="user_prompt"></div></dd>
</dl>
<dl>
<dt>Email地址:</dt>
<dd><input id="email" type="text" class="inputs" onblur="checkEmail()" /><div id="email_prompt"></div></dd>
</dl>
<dl>
<dt>手机号码:</dt>
<dd><input id="mobile" type="text" class="inputs" onblur="checkMobile()" /><div id="mobile_prompt"></div></dd>
</dl>
<dl>
<dt>登录密码:</dt>
<dd><input id="pwd" type="password" class="inputs" onblur="checkPwd()" /><div id="pwd_prompt"></div></dd>
</dl>
<dl>
<dt>密码确认:</dt>
<dd><input id="repwd" type="password" class="inputs" onblur="checkRepwd()" /><div id="repwd_prompt"></div></dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="" type="image" src="login.jpg" /></dd>
</dl>
</form>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#myform").submit(function () {
if(!checkUser()){
return false;
}
if(!checkEmail()){
return false;
}
if(!checkMobile()){
return false;
}
if(!checkPwd()){
return false;
}
if(!checkRepwd()){
return false;
}
return true;
})
})
function checkUser() {
var user = $("#user").val();
var user_prompt = $("#user_prompt");
var regUser = /^[a-zA-Z]\w{5,16}$/;
if(user == "") {
user_prompt.html("用户名长度不能为空");
return false;
}
else if (regUser.test(user) == false) {
user_prompt.html("用户名不正确");
return false;
}
user_prompt.html("");
return true;
}
function checkEmail() {
var email = $("#email").val();
var email_prompt = $("#email_prompt");
var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if (email == "") {
email_prompt.html("电子邮箱不能为空");
return false;
}
else if (regEmail.test(email) == false) {
email_prompt.html("邮箱格式不正确,例如web@sohu.com");
return false;
}
email_prompt.html("");
return true;
}
function checkMobile() {
var mobile = $("#mobile").val();
var mobile_prompt = $("#mobile_prompt");
var regMobile = /^1[34578][0-9]{9}$/;
if(mobile == "") {
mobile_prompt.html("用户名长度不能为空");
return false;
}
else if (regMobile.test(mobile) == false) {
mobile_prompt.html("用户名不正确");
return false;
}
mobile_prompt.html("");
return true;
}
function checkPwd() {
var pwd = $("#pwd").val();
var pwd_prompt = $("#pwd_prompt");
var regPwd=/^.*(?=.{4,10})(?=.*\d)(?=.*[A-Za-z]).*$/;
if (pwd == "") {
pwd_prompt.html("密码不能为空");
return false;
}else if(regPwd.test(pwd)==false){
$("#pwd_prompt").html("密码包含字母和数字")
return false;
}
else if (pwd.length < 4 || pwd.length > 10) {
pwd_prompt.html("密码长度为4-10字符");
return false;
}
pwd_prompt.html("");
return true;
}
function checkRepwd() {
var pwd = $("#pwd").val();
var repwd = $("#repwd").val();
var repwd_prompt = $("#repwd_prompt");
if (repwd != pwd) {
repwd_prompt.html("两次输入的密码不一致");
return false;
}
repwd_prompt.html("");
return true;
}
</script>
</body>
</html>
3
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作注册验证</title>
<style>
*{
margin:0;
padding:0;
font-size:12px;
line-height:25px;
}
.main{
width:470px;
margin: 0 auto;
}
.main dl{clear: both; height: 30px;}
.main dl dt{
text-align:right;
float: left;
width:100px;
height:25px;
padding-right:5px;
}
.inputs{
width:100px;
height:16px;
border:solid 1px #666666;
float:left;
margin-right:5px;
}
.main dl dd div{
display: inline;
margin-left:10px;
color:#F00;
}
</style>
</head>
<body>
<div class="main"><img src="top2.jpg" alt="top"/>
<form action="" method="post" id="myform">
<dl>
<dt class="left">用户名:</dt>
<dd><input id="user" type="text" class="inputs" onblur="checkUser()" onfocus="showUser()" /><div id="user_prompt" class="prompt"></div></dd>
</dl>
<dl>
<dt class="left">密码:</dt>
<dd><input id="pwd" type="password" class="inputs" onblur="checkPwd()" onfocus="showPwd()" /><div id="pwd_prompt" class="prompt"></div></dd>
</dl>
<dl>
<dt class="left"> </dt>
<dd><input name="" type="image" src="sumbit_btn2.jpg" /></dd>
</dl>
</form>
</div>
<script type="text/javascript"src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#myform").submit(function () {
if (!checkUser()) {
return false;
}
if (!checkPwd()) {
return false;
}
return true;
})
})
function showUser(){
$("#user_prompt").html("首位为字母的4-16个字母,数字,下划线")
}
function showPwd(){
$("#pwd_prompt").html("4-10个字母和下划线")
}
function checkUser() {
var regUser = /^[a-zA-Z]\w{4,16}$/;
var user = $("#user").val();
if (regUser.test(user) == false) {
$("#user_prompt").html("用户名不正确")
return false;
}
$("#user_prompt").html("")
return true;
}
function checkPwd(){
var regPwd=/^[a-zA-Z_]{4,10}$/;
var pwd = $("#pwd").val();
if (regPwd.test(pwd)==false) {
$("#pwd_prompt").html("密码不正确")
return false;
}
$("#pwd_prompt").html("")
return true;
}
</script>
</body>
</html>