表单验证

来源：互联网发布：骂人软件编辑：程序博客网时间：2024/06/08 05:00

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日考</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<form action="/new_file.html" method="post" onsubmit="return check()">
姓名:<input type="text" id="name" class="name"/><span id="nametip"></span><br>
邮箱:<input type="text" id="email" class="email" /><span id="emailtip"></span><br>
<input type="submit" id="submit" value="提交" />
</form>

<script type="text/javascript">
$("#name").blur(function(){

// 用户名不能小于3个字符，否则在其文本框后面追加红色提示信息，当用户填入表单的格式正确的时候在其文本框后面提示“√”
var name = $("#name").val();
if (name.length<3) {
$("#nametip").html("用户名格式不正确");
$("#nametip").css({"color":"red"});
} else{
$("#nametip").html("√");
}
});
$("#email").blur(function(){

var em = $("#email").val();
//indexOf("要查找的字符")
//如果有的话，返回字符所在的下标
//如果没有，返回-1
if (em.indexOf("@")!=-1) {

$("#emailtip").html("√");
} else{
$("#emailtip").html("邮箱名格式不正确");
$("#emailtip").css({"color":"red"});
}
});
//表单验证的方法
function check(){

var name = $("#name").val();
if (name.length<3) {
//不符合条件，不跳转
return false;
} else{
return true;
}

}

</script>

</body>
</html>

阅读全文

0 0