Javascript 使用jquery进行文本框验证_Javascript_Jquery_Html

Javascript 使用jquery进行文本框验证

javascript jquery html

Javascript 使用jquery进行文本框验证,javascript,jquery,html,Javascript,Jquery,Html,我不熟悉JQuery。我想使用jquery对四个文本框进行验证编码我已经做了 <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></scr

我不熟悉JQuery。我想使用jquery对四个文本框进行验证

编码我已经做了

  <html>
    <head>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

       <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
       <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

       <link href="runnable.css" rel="stylesheet" />
       <script src="//code.jquery.com/jquery-1.9.1.js"></script>
       <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

          <script>
              $(function() {
                 $("#register-form").validate({
                  rules: {
                        firstname: "required",
                        lastname: "required",
                         email: {
                         required: true,
                         email: true
                        },
             password: {
                         required: true,
                         minlength: 5
                      },
                       agree: "required"
                 },


              messages: {
                       firstname: "Please enter your first name",
                       lastname: "Please enter your last name",
              password: {
                      required: "Please provide a password",
                      minlength: "Your password must be at least 5 characters long"
                        },
                      email: "Please enter a valid email address",
                     agree: "Please accept our policy"
                       },

                submitHandler: function(form) {
                  form.submit();
              }
           });

        });

       </script>
     </head>
  <body>
          <h1>Register here</h1>
       <form action="" method="post" id="register-form" novalidate="novalidate">
          <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
          <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
          <div class="label">Email</div><input type="text" id="email" name="email" /><br />
          <div class="label">Password</div><input type="password" id="password" name="password" /><br />
          <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>

     </form>
    </body>
 </html>


$（函数（）{
$（“#登记表”）。验证({
规则：{
名字：“必选”，
姓氏：“必需”，
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：5
},
同意：“必需”
},
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为5个字符”
},
电子邮件：“请输入有效的电子邮件地址”，
同意：“请接受我们的政策”
},
submitHandler:函数（表单）{
表单提交（）；
}
});
});
在这里注册
名字

姓氏

电子邮件

密码

如果我在提交时没有向输入文本框提供任何文本，有人会检查我的程序吗？它应该显示红色消息，但没有显示正确的错误消息。

请尝试以下代码：

jQuery

 $(document).ready(function () {
  $('#submit').click(function (e) {
            var isValid = true;
            $('#firstname,#lastname,#email,#password').each(function () {
                if ($.trim($(this).val()) == '') {
                    isValid = false;
                    $(this).css({
                        "border": "1px solid red",
                        "background": "#FFCECE"
                    });
                }
                else {
                    $(this).css({
                        "border": "",
                        "background": ""
                    });
                }
            });
            if (isValid == false)
                e.preventDefault();

        });
});

提交按钮代码：

 <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" id="submit" /></div>

您可以看到它的演示。

请用您的代码替换以下代码

    <html>
    <head>
    <style type="text/css">
        .error
        {
            border: 1px solid;
            background-repeat: no-repeat;
            background-position: 10px center;
            color: #D8000C;
            background-color: #FFBABA;
            width: 280px;
            height: 16px;
            padding: 5px 3px 5px 15px;
        }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css"
        rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link href="runnable.css" rel="stylesheet" />
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script>
        $(function () {
            $("#register-form").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    agree: "required"
                },


                messages: {
                    firstname: "Please enter your first name",
                    lastname: "Please enter your last name",
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                },

                submitHandler: function (form) {
                    form.submit();
                }
            });

        });

    </script>
</head>
<body>
    <h1>
        Register here</h1>
    <form action="" method="post" id="register-form" novalidate="novalidate">
    <div class="label">
        First Name</div>
    <input type="text" id="firstname" name="firstname" /><br />
    <div class="label">
        Last Name</div>
    <input type="text" id="lastname" name="lastname" /><br />
    <div class="label">
        Email</div>
    <input type="text" id="email" name="email" /><br />
    <div class="label">
        Password</div>
    <input type="password" id="password" name="password" /><br />
    <div style="margin-left: 140px;">
        <input type="submit" name="submit" value="Submit" /></div>
    </form>
</body>
</html>


.错误
{
边框：1px实心；
背景重复：无重复；
背景位置：10px中心；
颜色：#D8000C；
背景色：#FFBABA；
宽度：280px；
高度：16px；
填充物：5px 3px 5px 15px；
}
$（函数（）{
$（“#登记表”）。验证({
规则：{
名字：“必选”，
姓氏：“必需”，
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：5
},
同意：“必需”
},
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为5个字符”
},
电子邮件：“请输入有效的电子邮件地址”，
同意：“请接受我们的政策”
},
submitHandler:函数（表单）{
表单提交（）；
}
});
});
在这里注册
名字


姓


电子邮件


密码

尝试以下代码：


.错误
{
颜色：红色；
}
$（函数（）{
$（“#登记表”）。验证({
规则：{
名字：“必选”，
姓氏：“必需”，
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
要求：正确，
最小长度：5
},
同意：“必需”
},
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为5个字符”
},
电子邮件：“请输入有效的电子邮件地址”，
同意：“请接受我们的政策”
},
submitHandler:函数（表单）{
表单提交（）；
}
});
});
在这里注册
名字

姓氏

电子邮件

密码

谢谢

我感谢大家

我用不同的方式做了同样的事情，但效果很好

<!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=iso-8859-1" />
    <title>Untitled Document</title>

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {
           $('#submit').click(function (e) {
               var isValid = true;
               $('#name,#college,#state,#country').each(function () {
                if ($.trim($(this).val()) == '') {
                    isValid = false;
                    $(this).css({
                           "border": "1px solid red",
                           "background": "#FFCECE"
                           });
                  }
                 else {
                     $(this).css({
                             "border": "",
                             "background": ""
                                });
                      }
                 });
                 if (isValid == false)
                      e.preventDefault();
                   });
     });
         </script>
       </head>
          <body>
             <div class="label"> Name</div><input type="text" id="name" name="firstname" /><br />
              <div class="label">College</div><input type="text" id="college" name="lastname" /><br />
              <div class="label">State</div><input type="text" id="state" name="email" /><br />
              <div class="label">Country</div><input type="password" id="country" name="password" /><br />
              <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" id="submit" /></div>
      </body>
   </html>


无标题文件
$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（e）{
var isValid=true；
$（“#名称，#学院，#州，#国家”）。每个（功能（）{
if（$.trim（$（this.val（））=''）{
isValid=false；
$（this.css）({
“边框”：“1px纯红”，
“背景”：“FFCECE”
});
}
否则{
$（this.css）({
“边界”：“，
“背景”：”
});
}
<!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=iso-8859-1" />
    <title>Untitled Document</title>

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {
           $('#submit').click(function (e) {
               var isValid = true;
               $('#name,#college,#state,#country').each(function () {
                if ($.trim($(this).val()) == '') {
                    isValid = false;
                    $(this).css({
                           "border": "1px solid red",
                           "background": "#FFCECE"
                           });
                  }
                 else {
                     $(this).css({
                             "border": "",
                             "background": ""
                                });
                      }
                 });
                 if (isValid == false)
                      e.preventDefault();
                   });
     });
         </script>
       </head>
          <body>
             <div class="label"> Name</div><input type="text" id="name" name="firstname" /><br />
              <div class="label">College</div><input type="text" id="college" name="lastname" /><br />
              <div class="label">State</div><input type="text" id="state" name="email" /><br />
              <div class="label">Country</div><input type="password" id="country" name="password" /><br />
              <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" id="submit" /></div>
      </body>
   </html>

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript">
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });;
    </script>
    <script>
        $(document).ready(function() {
            $("#myform1").validate({
                rules: {
                    box1: {
                        required: true,
                        range: [13, 23]
                    }
                }
            });
            var rules = {};
            $.each(["box1", "box2", "box3", "box4", "box5"], function(i, v) {
                rules[v] = {
                    required: true,
                    range: [13, 23]
                }
            })
            $("#myform2").validate({
                rules: rules
            });
        });
    </script>
</head>

<body>
    <form id="myform1" method="post">
        <label for="field">Required, minimum 13, maximum 23:</label>
        <input type="text" name="box1"
        id="var1" value="">
    </form>
    <br>
    <form id="myform2" method="post">
        <label for="field">Required, minimum 13, maximum 23:</label>
        <input type="text" name="box1"
        id="var1" value="">
        <input type="text" name="box2" id="var1" value="">
        <input type="text" name="box3" id="var1" value="">
        <input type="text" name="box4" id="var1" value="">
        <input type="text" name="box5" id="var1" value="">
    </form>
</body>