一个简单的input离焦事件验证

最新推荐文章于 2025-05-27 16:07:58 发布

yedaiyang

最新推荐文章于 2025-05-27 16:07:58 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yedaiyang/article/details/78729857

这篇博客介绍了一个使用JavaScript实现的表单验证方法，通过监听input元素的离焦事件，对姓名、邮箱、手机号和身份证号码进行格式检查。当用户离开输入框时，若输入不符合规则，则显示错误提示；若符合规则，显示确认标记并设置验证标志。最后，通过点击提交按钮判断所有字段是否都通过验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//建立表格
  姓名:<input type="text" id="name" /><span id="namesp"></span><br />
  Email地址:<input type="text" id="email" /><span id="emailsp"></span><br />
  手机号:<input type="text" id="sjh" /><span id="sjhsp"></span><br />
  身份证号码:<input type="text" id="sfz" /><span id="sfzsp"></span><br />
  <input type="button" id="btn" value="提交" />
</center>

//调用script
<script>

//先定4个flag来确认是不是全部符合在后面调用验证
  var flag1 = false;
  var flag2 = false;
  var flag3 = false;
  var flag4 = false;

//拿到name框的离焦事件并且验证
  $("#name").blur(function(){
   var name = $("#name").val();
   if(name.length<3){
    $("#namesp").html("用户名格式不正确");
    return;
   }else if(name.length==3){
    $("#namesp").html("√");
    flag1 = true;
   }else if(name.length>3){
    $("#namesp").html("√");
    flag1 = true;
   }
  })
  $("#email").blur(function(){
   var email = $("#email").val();
   if(email.indexOf("@")==-1){
    $("#emailsp").html("Email格式不正确");

   }else if(email.indexOf("@")!=-1){
    $("#emailsp").html("√");
    flag2 = true;
   }
  })
  $("#sfz").blur(function(){
   var sjh = $("#sjh").val();
   if(sjh.length==11){
    $("#sjhsp").html("√");
    flag3 = true;
   }else if(sjh.length>11){
    $("#sjhsp").html("手机号码不正确");

   }else if(sjh.length<11){
    $("#sjhsp").html("手机号码不正确");

   }
  })
  $("#sfz").blur(function(){
   var sfz = $("#sfz").val();
   if(sfz.length==18){
    $("#sfzsp").html("√");
    flag4 = true;
   }else if(sfz.length>18){
    $("#sfzsp").html("身份证号码不正确");

   }else if(sfz.length<18){
    $("#sfzsp").html("身份证号码不正确");

   }
  })