因为一个L 引发的失疯病~~

原创于 2018-03-13 16:51:55 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个具体的案例，展示了如何使用jQuery进行表单验证。详细介绍了各个字段的验证规则及实现方式，并指出了常见错误及解决方法。

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

因为一个L引发的失疯病

某天，朋友发过了一个js验证的代码所阻止不了提交，代码如下，其实，细心点很容易解决的要不你们先试试

后面写总结。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
    <div class="wss ws-content">


      <!-- 留言表 -->
        <div class="liuy">


          <div class="liuson liu-l">
              
            <include file="gongtong:marque4"/>
          </div>


          <div class="liuson liu-r">
              
              <form action="http://www.baidu.coom" method="post" id="apply">


                <div class="form-group clearfix">
                  <div class="wslyan-l">
                      <em>*</em>项目：
                  </div>
                  <div class="wslyan-l">
                    <input type="text" name="project" id="" class="project" placeholder="郑州张一绝小吃培训中心 *关于我们 *免费报名" /><span></span>
                  </div>
                </div>


                <div class="form-group clearfix">
                  <div class="wslyan-l">
                      <em>*</em>输入姓名：
                  </div>
                  <div class="wslyan-l">
                    <input type="text" name="name" id="" class="name " placeholder="输入姓名" /><span></span>
                  </div>
                </div>


                <div class="form-group clearfix">
                  <div class="wslyan-l">
                      输入性别：
                  </div>
                  <div class="wslyan-l">
                    <input type="radio" name="sex" id="" placeholder="输入性别"  value="1" checked><span>男</span> <input type="radio" name="sex" id="" placeholder="输入性别"  value="0">女
                  </div>
                </div>


                <div class="form-group clearfix">
                  <div class="wslyan-l">
                      输入qq：
                  </div>
                  <div class="wslyan-l">
                    <input type="text" name="koukou" id="" class="koukou" placeholder="输入qqq" /><span></span>
                  </div>
                </div>
                
                <div class="form-group clearfix">
                  <div class="wslyan-l">
                      <em>*</em>输入电话：
                  </div>
                  <div class="wslyan-l">
                    <input type="text" name="phone" id="" class="phone" placeholder="输入电话" /><span></span>
                  </div>
                </div>


                <div class="form-group clearfix">
                  <div class="wslyan-l">
                      <em>*</em>输入地址：
                  </div>
                  <div class="wslyan-l">
                    <input type="text" name="address" id="" class="address" placeholder="输入地址" /><span></span>
                  </div>
                </div>


                <div class="form-group clearfix">
                  <div class="wslyan-l">
                      <em>*</em>留言内容（100字内）：
                  </div>
                  <div class="wslyan-l">
                    <textarea name="content" id="" cols="60" class="con" rows="10"></textarea><span></span>
                  </div>
                </div>


                <div class="form-group clearfix">
                  <div class="wslyan-l">
                      
                  </div>
                  <div class="wslyan-l">
                    <input type="submit" value="提交" />
                  </div>
                </div>




              </form>
          </div>
        </div>


      <!-- 留言表 -->
      
    </div>
</body>
</html>


<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
<script>
var UPROJECT = false;
var UNAME = false;
var UPHONE = false;
var UKOUKOU = false;
var UADDRESS = false;
var UCONTENT = false;
// 项目
$(".project").blur(function(){
    var project=$(this).val();
    var math=/^[\u4e00-\u9fa5]+$/;
    var b=$(this);
    if(math.test(project)){
      b.css("border","1px solid green");
      b.next("span").empty();
      UPROJECT = true;
    }else{
       b.css("border","1px solid red");
       b.next("span").css("color","red");
       b.next("span").html("输入必须为中文");
       UPROJECT = false;
    }
})
// 姓名
$(".name").blur(function(){
    var name=$(this).val();
    var math=/^[\u4e00-\u9fa5]{2,4}$/;
    n=$(this);
    if(math.test(name)){
      n.css("border","1px solid green");
      n.next("span").empty();
      UNAME= true;
    }else{
      n.css("border","1px solid red");
      n.next("span").css("color","red");
      n.next("span").html("请输入2-4位中文");
       UNAME =false;
    }
})
// QQ
$(".koukou").blur(function(){


    var koukou = $(this).val();
    var math = /^[1-9][0-9]{4,14}$/;
    q=$(this);
    if(math.test(koukou)){
      q.css("border","1px solid green");
      q.next("span").empty();
      UKOUKOU =true;
    }else{
      q.css("border","1px solid red");
      q.next("span").css("color","red");
      q.next("span").html("请输入正确的扣扣");
       UKOUKOU =false;
    }
})
// 电话
$(".phone").blur(function(){
    var phone = $(this).val();
    var math = /^13[123569]{1}\d{8}|15[1235689]\d{8}|188\d{8}$/; 
    p=$(this);
    if(math.test(phone)){
      p.css("border","1px solid green");
      p.next("span").empty();
      UPHONE =true;
    }else{
      p.css("border","1px solid red");
      p.next("span").css("color","red");
      p.next("span").html("请输入正确的手机号码");
       UPHONE =false;
    }
})
// 住址
$(".address").blur(function(){


    var address = $(this).val();
    var math = /^(?=.*?[\u4E00-\u9FA5])[\d\u4E00-\u9FA5]+$/;
    a=$(this);


    if(math.test(address)){
      a.css("border","1px solid green");
      a.next("span").empty();
      UADDRESS =true;
    }else{


      a.css("border","1px solid red");
      a.next("span").css("color","red");
      a.next("span").htm("请输入正确的住址信息");


       UADDRESS =false;
    }
})


// 留言内容
// $(".con").blur(function(){
//   var content = $(this).val();
//   var math = /[^\u4E00-\u9FA5]{0,50}$/;
//   c=$(this);
//     if(math.test(content)){
//       c.css("border","1px solid green");
//       c.next("span").empty();
//       CONTENT= true;
//     }else{
//       c.css("border","1px solid red");
//       c.next("span").css("color","red");
//       c.next("span").html("请输入0-50位的留言内容");
//        CONTENT =false;
//     }
// })
$("#apply").submit(function(){


 $("input").trigger("blur");


 if(UPROJECT && UNAME && UCONTENT && UKOUKOU && UADDRESS && UPHONE ){
    return true;
  }else{
    return false;
  } 




  return false;
})
</script>

解决过程。。。。。省略，对我而言最重要的是学习到什么。。。

总结：

1.首先 jquery 中submit 事件是针对 form 元素使用也就是 $("form") 中生效代码如下：

<script>
$("form).submit(function(){
  // 阻止提交 
  return false
})
</script>

绑定提交按钮使用 submit 的方式是无效的

2.再次确认了 js 代码出错的话往下代码不执行，将会被跳过

3.错误地点

   a.next("span").htm("请输入正确的住址信息");

开开心心敲代码，要不断的学习进步~