<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
span{
color: red;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
var flag=true;
$(function(){
$("#name").blur(function(){
//获取表单内容
var name=$("#name").val();
var sp1=$("#sp1");
if(name.length<3||name==null){
sp1.text("用户名格式不正确");
flag=false;
}else{
sp1.text("√");
flag=true;
}
});
$("#email").blur(function(){
//获取表单内容
var email=$("#email").val();
var sp2=$("#sp2");
if(email.match("@")){
sp2.text("√");
flag=true;
}else{
sp2.text("Email格式不正确");
flag=false;
}
});
$("#tel").blur(function(){
//获取表单内容
var tel=$("#tel").val();
var sp3=$("#sp3");
if(tel.length==11){
sp3.text("√");
flag=true;
}else{
sp3.text("手机号码格式不正确");
flag=false;
}
});
$("#sfz").blur(function(){
//获取表单内容
var sfz=$("#sfz").val();
var sp4=$("#sp4");
if(sfz.length==18){
sp4.text("√");
flag=true;
}else{
sp4.text("身份证号码格式不正确");
flag=false;
}
});
$("button").click(function(){
var name=$("#name").val();
var tel=$("#tel").val();
var sfz=$("#sfz").val();
if(flag){
alert("提交成功")
}else{
alert("提交失败")
}
})
})
</script>
</head>
<body>
<form>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" id="name" /></td>
<td><span id="sp1" class=""></span></td>
</tr>
<tr>
<td>Email地址:</td>
<td><input type="email" id="email" /></td>
<td><span id="sp2" class=""></span></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" id="tel" /></td>
<td><span id="sp3" class=""></span></td>
</tr>
<tr>
<td>身份证号:</td>
<td><input type="text" id="sfz" /></td>
<td><span id="sp4" class=""></span></td>
</tr>
<tr>
<td colspan="3"><button>提交</button></td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
span{
color: red;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
var flag=true;
$(function(){
$("#name").blur(function(){
//获取表单内容
var name=$("#name").val();
var sp1=$("#sp1");
if(name.length<3||name==null){
sp1.text("用户名格式不正确");
flag=false;
}else{
sp1.text("√");
flag=true;
}
});
$("#email").blur(function(){
//获取表单内容
var email=$("#email").val();
var sp2=$("#sp2");
if(email.match("@")){
sp2.text("√");
flag=true;
}else{
sp2.text("Email格式不正确");
flag=false;
}
});
$("#tel").blur(function(){
//获取表单内容
var tel=$("#tel").val();
var sp3=$("#sp3");
if(tel.length==11){
sp3.text("√");
flag=true;
}else{
sp3.text("手机号码格式不正确");
flag=false;
}
});
$("#sfz").blur(function(){
//获取表单内容
var sfz=$("#sfz").val();
var sp4=$("#sp4");
if(sfz.length==18){
sp4.text("√");
flag=true;
}else{
sp4.text("身份证号码格式不正确");
flag=false;
}
});
$("button").click(function(){
var name=$("#name").val();
var tel=$("#tel").val();
var sfz=$("#sfz").val();
if(flag){
alert("提交成功")
}else{
alert("提交失败")
}
})
})
</script>
</head>
<body>
<form>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" id="name" /></td>
<td><span id="sp1" class=""></span></td>
</tr>
<tr>
<td>Email地址:</td>
<td><input type="email" id="email" /></td>
<td><span id="sp2" class=""></span></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" id="tel" /></td>
<td><span id="sp3" class=""></span></td>
</tr>
<tr>
<td>身份证号:</td>
<td><input type="text" id="sfz" /></td>
<td><span id="sp4" class=""></span></td>
</tr>
<tr>
<td colspan="3"><button>提交</button></td>
</tr>
</table>
</form>
</body>
</html>