表单验证，彭..

最新推荐文章于 2022-10-06 21:27:58 发布

scvas

最新推荐文章于 2022-10-06 21:27:58 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/wuzhanbin/article/details/77916078

版权

html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

表单验证，彭帅哥

用Dw编写，而且要导入js库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <script src="../../../jQuery/jquery-2.1.0.js"></script>
    <style>
       .right{
           color:red;
       }
       .error{
           color:green;
       }

   </style>
    <script>
       $(function(){
           

           //通过选择器拿到要操作的标签，给标签添加失焦事件
           $("input:eq(0)").blur(function(){
               //1.拿到当前标签中的内容.this是拿到当前标签的DOM对象
               //alert(this.value);

               var name = $(this).val();
               if(name.length<3){
                   $("span:eq(0)").html("用户名格式有误").addClass("right").show();
                   //alert("asdf");
               }else{
                   $("span:eq(0)").html("√").addClass("error").show();
               }
               //return false;
           });

           
           $("input:eq(1)").blur(function(){
               //1.拿到当前标签中的内容.this是拿到当前标签的DOM对象
               //alert(this.value);
               var name = $(this).val();
               //var reg = /@/;
               if(name.search("@") == -1){
                   $("span:eq(1)").removeClass("right error");
                   $("span:eq(1)").html("邮箱格式有误").addClass("right").show();
                   //return false;
               }else{
                   $("span:eq(1)").remove("right error");
                   $("span:eq(1)").html("√").addClass("error").show();
                   //return false;
               }
           });


           $("input:eq(2)").blur(function(){
               //1.拿到当前标签中的内容.this是拿到当前标签的DOM对象
               //alert(this.value);
               /*var name = $(this).val();
               var reg = /\D/;//匹配非数字。
               if(reg.test(name)){
                   $("span:eq(2)").removeClass("right error");
                   $("span:eq(2)").html("手机格式有误").addClass("right").show();
                   //return false;
               }else{
                   $("span:eq(2)").remove("right error");
                   $("span:eq(2)").html("√").addClass("error").show();
                   //return false;
               }*/

               var name = $(this).val();
               if(isNaN(name)){
                   alert("不是数字");
               }
           });
       });
   </script>
</head>

<body>
   <center>
       
            姓名：<input type="text" /><span></span><br/><br/>
            Email：<input type="text" /><span></span><br/><br/>
            手机号：<input type="text" /><span></span><br/><br/>
            身份证号：<input type="text" /><span></span><br/><br/>
        
    </center>
</body>
</html>