表单验证

最新推荐文章于 2024-08-02 00:06:19 发布

原创最新推荐文章于 2024-08-02 00:06:19 发布 · 312 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery实现的简单表单验证示例。通过光标离开事件触发验证，确保用户名长度不少于三个字符，并检查电子邮件地址是否包含'@'符号。此外，还介绍了如何通过onsubmit函数控制表单提交行为。

<!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>