<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.box{
width: 600px;
height: 600px;
border: 1px solid cyan;
margin: 30px auto;
}
.box .bg{
width: 96%;
margin-left: 3%;
}
.box .bg tr td:nth-child(1){
text-align: right;
width: 30%;
}
.box .bg tr td:nth-child(2) input{
width: 242px;
height: 23px;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 10px;
}
.box .bg tr td:nth-child(3) span{
display: block;
width: 160px;
height: 23px;
padding-left: 5px;
}
</style>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$("#zh").blur(function(){
fzzh();
});
function fzzh(){
var zh = $("#zh").val();
var zhpd = /^[0-9a-zA-Z]*$/;
if(zh == ""){
$(".pdzh").text("账号不能为空");
$(".pdzh").css("color","red");
return false;
}else if(!zhpd.test(zh)){
$(".pdzh").text("账号不能出现特殊字符");
$(".pdzh").css("color","red");
return false;
}else{
$(".pdzh").text("");
return true;
}
}
$("#pass1").blur(function(){
fzpass1();
});
function fzpass1(){
var pass1 = $("#pass1").val();
var pass1pd = /\w/;
if(pass1 == ""){
$(".pdpass1").text("密码不能为空");
$(".pdpass1").css("color","red");
return false;
}else if(!pass1pd.test(pass1)){
$(".pdpass1").text("密码不能出现特殊字符");
$(".pdpass1").css("color","red");
return false;
}else{
$(".pdpass1").text("");
return true;
}
}
$("#pass2").blur(function(){
fzpass2();
});
function fzpass2(){
var pass1 = $("#pass1").val();
var pass2 = $("#pass2").val();
var pass2pd = /\w/;
if(pass2 == ""){
$(".pdpass2").text("重置密码不能为空");
$(".pdpass2").css("color","red");
return false;
}else if(!pass2pd.test(pass2)){
$(".pdpass2").text("重置密码不能出现特殊字符");
$(".pdpass2").css("color","red");
return false;
}else if(pass2 != pass1){
$(".pdpass2").text("密码不一致");
$(".pdpass2").css("color","red");
return false;
}else{
$(".pdpass2").text("");
return true;
}
}
$("#name").blur(function(){
fzname();
});
function fzname(){
var name = $("#name").val();
if(name == ""){
$(".pdname").text("昵称不能为空");
$(".pdname").css("color","red");
return false;
}else{
$(".pdname").text("");
return true;
}
}
$("#rq").blur(function(){
fzrq();
});
function fzrq(){
var rq = $("#rq").val();
if(rq == ""){
$(".pdrq").text("出生日期不能为空");
$(".pdrq").css("color","red");
return false;
}else{
$(".pdrq").text("");
return true;
}
}
$("#nub").blur(function(){
fznub();
});
function fznub(){
var nub = $("#nub").val();
var nubpd = /^\d{17}(\d|x)$/;
if(nub == ""){
$(".pdnub").text("身份证号不能为空");
$(".pdnub").css("color","red");
return false;
}else if(!nubpd.test(nub)){
$(".pdnub").text("身份证号不合法");
$(".pdnub").css("color","red");
return false;
}else{
$(".pdnub").text("");
return true;
}
}
$("#tl").blur(function(){
fztl();
});
function fztl(){
var tl = $("#tl").val();
var tlpd = /^1[0-9]{10,10}$/;
if(tl == ""){
$(".pdtl").text("手机号不能为空");
$(".pdtl").css("color","red");
return false;
}else if(!tlpd.test(tl)){
$(".pdtl").text("手机号不合法");
$(".pdtl").css("color","red");
return false;
}else{
$(".pdtl").text("");
return true;
}
}
$("#qq").blur(function(){
fzqq();
});
function fzqq(){
var qq = $("#qq").val();
var qqpd = /^\d{6,}$/;
if(qq == ""){
$(".pdqq").text("QQ不能为空");
$(".pdqq").css("color","red");
return false;
}else if(!qqpd.test(qq)){
$(".pdqq").text("QQ5位以上");
$(".pdqq").css("color","red");
return false;
}else{
$(".pdqq").text("");
return true;
}
}
$("#eml").blur(function(){
fzeml();
});
function fzeml(){
var eml = $("#eml").val();
var emlpd =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(eml == ""){
$(".pdeml").text("邮箱不能为空");
$(".pdeml").css("color","red");
return false;
}else if(!emlpd.test(eml)){
$(".pdeml").text("邮箱不格式不正确");
$(".pdeml").css("color","red");
return false;
}else{
$(".pdeml").text("");
return true;
}
}
function sub(){
if(fzzh() == false || fzpass1() == false || fzpass2() == false || fzname() == false || fzrq() == false || fznub() == false || fztl() == false || fzqq() == false || fzeml() == false){
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<div class="box">
<hr width="30px" size="1px" color="#666666" style="float: left; margin-top: 13px; margin-bottom: 50px;" />
<span style="float: left; padding: 2px;">注册</span>
<hr width="531px" size="1px" color="#666666" style="float: left; margin-top: 13px; margin-bottom: 50px;" />
<form action="https://www.baidu.com" οnsubmit="return sub()" target="_blank">
<table class="bg">
<tr>
<td>账号</td>
<td><input type="text" id="zh"></td>
<td><span class="pdzh"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="pass1"></td>
<td><span class="pdpass1"></span></td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="password" id="pass2"></td>
<td><span class="pdpass2"></span></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text" id="name"></td>
<td><span class="pdname"></span></td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="date" id="rq"></td>
<td><span class="pdrq"></span></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="rd" style="width: 13px; height: 13px" checked="checked">汉子
<input type="radio" name="rd" style="width: 13px; height: 13px;">妹子
</td>
<td><span></span></td>
</tr>
<tr>
<td>身份证号</td>
<td><input type="number" id="nub"></td>
<td><span class="pdnub"></span></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="tel" id="tl"></td>
<td><span class="pdtl"></span></td>
</tr>
<tr>
<td>QQ</td>
<td><input type="text" id="qq"></td>
<td><span class="pdqq"></span></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" id="eml"></td>
<td><span class="pdeml"></span></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<input type="submit" value="注册" style="width: 70px; height: 28px; background: #00ffff; border: 1px solid #666666; border-radius: 5px; margin: 30px 50px 30px 30px;" />
<input type="reset" value="清除" style="width: 70px; height: 28px; background: #cccccc; border: 1px solid #666666; border-radius: 5px; margin: 30px 30px 30px 50px;" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
表单判断
最新推荐文章于 2023-04-23 18:55:06 发布