验证表单是否正确——不能为空

来源：互联网发布：linux 云硬盘挂载编辑：程序博客网时间：2024/05/29 11:53

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
  <script>
   $(function() {
    $(".name").blur(function() {
     var ming = $(".name").val();
     if(ming == undefined || ming == "") {
      /*alert("用户名不能为空");*/
      /*alert的弹框形式*/
      $(".t_name").text("用户名不能为空");
     }
    })
   })
  </script>
</head>

《第二种》

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
  <script>
   //定义四中变量
   var f = false;
   var ff = false;
   var fff = false;
   var ffff = false;
   $(function(){
    //用户名的验证
    $(".uname").blur(function(){
     var name = $(".uname").val();
     if(name.length!=3){
      $(".t_uname").text("必须大于3位");
      f = false;
     }else{
      $(".t_uname").text("√");
      f = true;
     }
    });
    //邮箱的验证
    $(".uemail").blur(function(){
     var email = $(".uemail").val();
     if(email.indexOf("@")==-1){
      $(".t_uemail").text("必须包含@");
      ff = false;
     }else{
      $(".t_uemail").text("√");
      ff = true;
     }
    });
    //手机号的验证
    $(".ushou").blur(function(){
     var shouji = $(".ushou").val();
     if(shouji.length!=11){
      $(".t_ushou").text("手机号必须是11位");
      fff = false;
     }else{
      $(".t_ushou").text("√");
      fff = true;
     }
    });
    //身份证的验证
    $(".ushen").blur(function(){
     var shen = $(".ushen").val();
     if(shen.length!=18){
      $(".t_ushen").text("身份证必须是18位");
      ffff = false;
     }else{
      $(".t_ushen").text("√");
      ffff = true;
     }
    });
   })
   //跳转页面
   function biao(){
    if(f==true&&ff==true&&fff==true&&ffff==true){
     return true;
    }else{
     alert("此表单有误！！！！！");
     return false;
    }
   }
  </script>
</head>
<body>
  <form action="http://www.baidu.com" onsubmit="return biao()">
   用户名：<input type="text" class="uname" /><span class="t_uname" style="color: red;"></span><br />
   email地址：<input type="text" class="uemail" /><span class="t_uemail" style="color: red;"></span><br />
   手机号：<input type="text" class="ushou" /><span class="t_ushou" style="color: red;"></span><br />
   身份证号：<input type="text" class="ushen" /><span class="t_ushen" style="color: red;"></span><br />
   <input type="submit" value="提交" />
  </form>
</body>
</html>

阅读全文

0 0