<html>
<head>
<meta charset="utf-8">
<title>注册表单验证</title>
<script src="jquery.js"></script>
<style type="text/css">
table{background-color:pink;width:80%;height:300px;}
td{text-align:center;}
</style>
<script language="javascript">
$("document").ready(function(){
$("#form1").submit(function(){
var user=$("#user").val();
var username=/^[a-z]{6,10}/i;
if(user.length==0){
$("#error1").html("账号不可以为空");
return false;
}else if(!username.test(user)){
$("#error1").html("请输入6-10的字母");
return false;
}else{
$("#error1").html("输入正确");
} var password=$("#pw").val();
var password1=/^[0-9]{6,10}/;
if(password.length==0){
$("#error2").html("密码不可以为空");
return false;
}else if(!password1.test(password)){
$("#error2").html("请输入6-10位的数字密码");
return false;
}else{
$("#error2").html("输入正确");
} var name=$("#name").val();
var name1=/^[a-z]{6,10}/i;
if(name.length==0){
$("#error3").html("姓名不可以为空");
return false;
}else if(!name1.test(name)){
$("#error3").html("请输入6-10位字母");
return false;
}else{
$("#error3").html("输入正确");
} var age=$("#ag").val();
var age1=/^[1-9]{1}[0-9]{0,1}$/;
if(age.length==0){
$("#error4").html("年龄不可以为空");
return false;
}else if(!age1.test(age)){
$("#error4").html("请输入合法年龄");
return false;
}else{
$("#error4").html("输入正确");
} var email=$("#em").val();
var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
if(email.length==0){
$("#error5").html("email不可以为空");
return false;
}else if(!email1.test(email)){
$("#error5").html("请输入合法电子邮件");
return false;
}else{
$("#error5").html("输入正确");
} var telephone=$("#tel").val();
var telephone1=/^[1]{1}[0-9]{10}/;
if(telephone.length==0){
$("#error6").html("电话不可以为空");
return false;
}else if(!telephone1.test(telephone)){
$("#error6").html("请输入合法电话");
return false;
}else{
$("#error6").html("输入正确");
} });
});
</script>
</head>
<body>
<center>
<form action="" method="post" id="form1" name="form1">
<h1>注册页面</h1>
<table border="1px">
<tr>
<td>
账 号：
<input type="text" name="admin" id="user"/>
<div id="error1" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
密 码：
<input type="password" name="password" id="pw"/>
<div id="error2" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
姓 名：
<input type="text" name="name1" id="name"/>
<div id="error3" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
年 龄：
<input type="text" name="age" id="ag"/>
<div id="error4" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
性别：
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>
电子邮件：<input type="text" name="email" id="em"/>
<div id="error5" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
电话号码：<input type="text" name="telephone" id="tel"/>
<div id="error6" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="注册"/> </td> </tr>
</table>
</form>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式表单验证</title>
<style type="text/css">
table{background-color:yellow;border:2px blue solid;}
</style>
</head>
<body>
<center>
<form action="login.html" method="post" onsubmit="return isForm()">
<h1>注册页面</h1>
<table border="1px" width="350px" height="400px">
<tr>
<td>
账 号：
<input type="text" name="username" id="user"/>
<div id="error1" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
密 码：
<input type="password" name="password" id="pw"/>
<div id="error2" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
姓 名：
<input type="text" name="name1" id="name"/>
<div id="error3" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
性 别：
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>
年 龄：
<input type="text" name="age" id="ag"/>
<div id="error4" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
电子邮件：<input type="text" name="email" id="em"/>
<div id="error5" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
电话号码：<input type="text" name="telephone" id="tel"/>
<div id="error6" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
<script language="javascript">
function isForm(){
var username=document.getElementById("user").value;
var password=document.getElementById("pw").value;
var name=document.getElementById("name").value;
var age=document.getElementById("ag").value;
var email=document.getElementById("em").value;
var telephone=document.getElementById("tel").value; var error1=document.getElementById("error1");
var error2=document.getElementById("error2");
var error3=document.getElementById("error3");
var error4=document.getElementById("error4");
var error5=document.getElementById("error5");
var error6=document.getElementById("error6"); var username1=/^[a-z]{6,10}/i;
var password1=/^[0-9]{6,10}/;
var name1=/^[a-z]{6,10}/i;
var age1=/^[1-9]{1}[0-9]{0,1}$/;
var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
var telephone1=/^[1]{1}[0-9]{10}/; if(!username1.test(username)){
alert("请输出6-10位字母");
return false;
}
error1.innerHTML="输入正确";
if(!password1.test(password)){
alert("请输入6-10的数字密码");
return false;
}
error2.innerHTML="输入正确";
if(!name1.test(name)){
alert("请输入6-10位字母");
return false;
}
error3.innerHTML="输入正确";
if(!age1.test(age)){
alert("请输入合法的年龄");
return false;
}
error4.innerHTML="输入正确";
if(!email1.test(email)){
alert("请输入合法电子邮件");
return false;
}
error5.innerHTML="输入正确";
if(!telephone1.test(telephone)){
alert("请输人电话联系方式");
return false;
}
error6.innerHTML="输入正确";
return true;
} </script>
</center>
</body>
</html>
