<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<title></title>
<script>
$(function(){
var flag1=false;
var flag2=false;
var flag3=false;
var flag4=false;
var $es = $("#es");
var $ns = $("#ns");
var $ps = $("#ps");
var $ps2 = $("#ps2");
//验证邮箱
$("#email").blur(function(){
var $email = $("#email").val();
if($email.indexOf("@")!=-1){
$es.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"邮箱可用");
flag1=true;
}else if($email==null||$email==""){
$es.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"不能为空");
flag1=false;
}else{
$es.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"Email错误");
flag1=false;
}
});
//验证名字
$("#name").blur(function(){
var $name = $("#name").val();
if($name.match( /^[\u4E00-\u9FA5]{1,}$/) ){
if($name.length>1 && $name.length<10){
$ns.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"用户名可用");
flag2=true;
}else if($name==null||$name==""){
$ns.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"不能为空");
flag2=false;
}else{
$ns.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"用户名不可用");
flag2=false;
}
}else{
if($name.length>3 && $name.length<21){
$ns.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"用户名可用");
flag2=true;
}else if($name==null||$name==""){
$ns.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"不能为空");
flag2=false;
}else{
$ns.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"用户名不可用");
flag2=false;
}
}
});
//验证密码
$("#pw").blur(function(){
var $pw = $("#pw").val();
if($pw.length>5 && $pw.length<20){
$ps.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"密码可用");
flag3=true;
}else if($pw==null||$pw==""){
$ps.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"不能为空");
flag3=false;
}else{
$ps.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"密码格式错误");
flag3=false;
}
});
//验证邮密码2
$("#pw2").blur(function(){
var $pw2 = $("#pw2").val();
var $pw = $("#pw").val();
if($pw2==$pw){
$ps2.html("<img src='img/dui.jpg' style='width: 14px ; height: 12px'>"+"验证成功");
flag4=true;
}else{
$ps2.html("<img src='img/cuo.jpg' style='width: 14px ; height: 12px'>"+"两次密码输入不同");
flag4=false;
}
});
//提交
$("#btn").click(function(){
if(flag1==true&&flag2==true&&flag3==true&&flag4==true){
alert("提交成功");
}else{
alert("提交失败"+flag1+"--"+flag2+"---"+flag3+"----"+flag4);
}
});
})
</script>
</head>
<body>
<form>
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<td style="text-align: right">请填写你的Email地址</td>
<td><input id="email" type="text" style="margin: 2px"> <span id="es">请填写有效的Email地址</span></td>
</tr>
<tr>
<td style="text-align: right">请设置你的名字</td>
<td><input id="name" type="text" style="margin: 2px"> <span id="ns">您的昵称可以由英文字母、中文、数字组成</span></td>
</tr>
<tr>
<td style="text-align: right">设置密码</td>
<td><input id="pw" type="text" style="margin: 2px"> <span id="ps">输入6-10位的密码</span></td>
</tr>
<tr>
<td style="text-align: right">再次确认密码</td>
<td><input id="pw2" type="text" style="margin: 2px"> <span id="ps2">再次输入您设置的密码</span></td>
</tr>
</table>
<input id="btn" type="button" value="注册">
</form>
</body>
</html>
验证表单
最新推荐文章于 2022-08-09 08:09:58 发布