表单姓名邮箱非空验证

<!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>
<!--
 光标离开事件
 显示与隐藏动画

 表单验证
 其中一种
 onsubmit 函数返回的如果是true ，就进行跳转
 否则不跳转
 -->
</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>
秒客网

表单姓名邮箱非空验证

相关文章
