<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<center>
<form action="success.html" method="get" οnsubmit="return check()">
<table>
<tr><td>姓名：</td><td><input type="text" id="uname"/></td><td><span id="sname"></span></td></tr>
<tr><td>邮箱：</td><td><input type="text" id="uemail"/></td><td><span id="semail"></span></td></tr>
<tr><td colspan="3"><input type="submit" value="提交"/></td></tr>
</table>
</form>
<script type="text/javascript">
function check(){
var nametip=$("#sname").html();
var emailtip=$("#semail").html();
if(nametip=="✔" && emailtip=="✔"){
return true;
}else{
return false;
}
}
//页面初使化事件
$(function(){
$("#uname").focus(function(){
//获得焦点时，改变边框的颜色
$(this).css("border","1px solid yellow").css("outline","none");
});
//失去焦点事件blur
$("#uname").blur(function(){
$(this).css("border","1px solid gray");
//获取输入的内容
var v=$(this).val();
if(v.length<3){//不合法
$("#sname").html("用户名长度必须大于等于3位！");
$("#sname").css("color","red");//将提示文字显示成红色
}else{
$("#sname").html("✔");
$("#sname").css("color","green");
}
});
$("#uemail").blur(function(){
var email=$(this).val();
//判断字符串有没有@符号
var i=email.indexOf("@");
if(i==-1){//代表字符串中 不存在 @ 符号
$("#semail").html("<b>邮箱中必须包含@字符！</b>");
$("#semail").css("color","red");//将提示文字显示成红色
// $("#semail").css("font-weight","bold");//加粗
}else{
$("#semail").html("✔");
$("#semail").css("color","green");
}
});
});
</script>
</center>
</style>
</head>
<body>
<center>
<form action="success.html" method="get" οnsubmit="return check()">
<table>
<tr><td>姓名：</td><td><input type="text" id="uname"/></td><td><span id="sname"></span></td></tr>
<tr><td>邮箱：</td><td><input type="text" id="uemail"/></td><td><span id="semail"></span></td></tr>
<tr><td colspan="3"><input type="submit" value="提交"/></td></tr>
</table>
</form>
<script type="text/javascript">
function check(){
var nametip=$("#sname").html();
var emailtip=$("#semail").html();
if(nametip=="✔" && emailtip=="✔"){
return true;
}else{
return false;
}
}
//页面初使化事件
$(function(){
$("#uname").focus(function(){
//获得焦点时，改变边框的颜色
$(this).css("border","1px solid yellow").css("outline","none");
});
//失去焦点事件blur
$("#uname").blur(function(){
$(this).css("border","1px solid gray");
//获取输入的内容
var v=$(this).val();
if(v.length<3){//不合法
$("#sname").html("用户名长度必须大于等于3位！");
$("#sname").css("color","red");//将提示文字显示成红色
}else{
$("#sname").html("✔");
$("#sname").css("color","green");
}
});
$("#uemail").blur(function(){
var email=$(this).val();
//判断字符串有没有@符号
var i=email.indexOf("@");
if(i==-1){//代表字符串中 不存在 @ 符号
$("#semail").html("<b>邮箱中必须包含@字符！</b>");
$("#semail").css("color","red");//将提示文字显示成红色
// $("#semail").css("font-weight","bold");//加粗
}else{
$("#semail").html("✔");
$("#semail").css("color","green");
}
});
});
</script>
</center>
652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
