1

我正在尝试使用 jQuery 进行简单的表单验证。实际上我正在尝试验证模糊和焦点的输入框。我现在只是验证第一个输入，它验证用户的名字。它不能正常工作。

任何人都可以帮助我吗？

HTML & 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>
      Test
    </title>
    <style type="text/css">
      .showerror{
        display:block;
      }
      .noshowerror{
        display:none;
      }
      .remerr{
        display:none;
      }

      .redborder{
        border:#F00 solid 1px;
        background-color:yellow;
      }
      .greenborder  {
        border:#0F3 solid 1px;
        background-color:#6F6;
      }
    </style>
  </head>

  <body>
    <div style="width:450px">
      <div style="float:left">
        <table>
          <form id="eg">
            <tr>
              <td>
                <label>
                  Name:
                </label>

                <td>
                  <input type="text" id="name" />
              </tr>
            <tr>
              <td>
                <label>
                  Surname:
                </label>

                <td>
                  <input type="text" id="surname" />
              </tr>
            <tr>
              <td>
                <label>
                  Email:
                </label>

                <td>
                  <input type="text" id="email" />
              </tr>
            <tr>
              <td>
                <label>
                  Number:
                </label>

                <td>
                  <input type="text" id="number" />
              </tr>
            <tr>
              <td>
                <label>
                  Age:
                </label>

                <td>
                  <input type="text" id="age" />
              </tr>
            <tr>
              <td>
                <label>
                  Comment:
                </label>

                <td>
                  <input type="text" id="comment" />
              </tr>
            <tr>
              <td>
                <label>
                  Password
                </label>

                <td>
                  <input type="password" id="pwd" />
              </tr>
            <tr>
              <td>
                <label>
                  Confirm Password
                </label>

                <td>
                  <input type="password" id="cnfmpwd" />
              </tr>
            <tr>
              <td colspan="2">
                <input type="submit" value="test" />
              </td>
            </tr>

          </form>
        </table>
      </div>
      <div style="float:right">
        <p id="fail" class="noshowerror" >
          Please enter name
        </p>
        <p id="nameerr2" class="remerr">
          Name is correct
        </p>
      </div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
    </script>
    <script type="text/javascript">

    $(document).ready(function () {
        if ($("#name").val('')) {

            $("#name").val('Name Please');
        }
        $('#name').focus(function () {
            if ($('#name').val() == 'Name Please') {
                $('#name').val("");
            }

        });
        $('#name').blur(function () {
            var nameRegex = /^[A-Za-z]+$/;
            var fname = document.getElementById("name").value;

            if (!nameRegex.test(fname)) {
                $("#name").addClass('redborder');

            } else if (fname == " ") {
                $("#name").addClass('redborder');
            } else {

                $("#name").addClass('greenborder');
                return false;
            }   
        });
    });

    </script>


  </body>
</html>

提前致谢

4

3 回答 3

1

我已经按照您的意图改进了我们的代码及其工作，在定义表格中的元素时有几个错误，您可以看看我的代码如何定义它。

现场演示

HTML 代码：

<body>
 <div style="width:450px">
<div style="float:left">
    <form id="eg" action="/">
        <table>
            <tr>
                <td>
                    <label>Name:</label>
                </td>
                <td>
                    <input type="text" id="name" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Surname:</label>
                </td>
                <td>
                    <input type="text" id="surname" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Email:</label>
                </td>
                <td>
                    <input type="text" id="email" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Number:</label>
                </td>
                <td>
                    <input type="text" id="number" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Age:</label>
                </td>
                <td>
                    <input type="text" id="age" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Comment:</label>
                </td>
                <td>
                    <input type="text" id="comment" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Password</label>
                </td>
                <td>
                    <input type="password" id="pwd" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Confirm Password</label>
                </td>
                <td>
                    <input type="password" id="cnfmpwd" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="test" onclick="return false;" />
                </td>
            </tr>
        </table>
    </form>
</div>
</div>
<div style="float:right">
   <p id="fail" class="noshowerror">Please enter name</p>
   <p id="nameerr2" class="remerr">Name is correct</p>
 </div>
</body>

JS代码：

$(document).ready(function () {
if ($("#name").val('')) {
    $("#name").val('Name Please');
}
$('#name').focus(function () {
    if ($('#name').val() == 'Name Please') {
        $('#name').val("");
    }

});
$('#name').blur(function () {
    var nameRegex = /^[A-Za-z]+$/;
    // var fname = document.getElementById("name").value;
    var fname = $("#name").val();
    alert(nameRegex.test(fname));

    if (!(nameRegex.test(fname))) {
        $("#name").removeClass('greenborder').addClass('redborder');

    } else if (fname == " ") {
        $("#name").removeClass('greenborder').addClass('redborder');
    } else {
        $("#name").removeClass('redborder').addClass('greenborder');
        return false;
    }


});

 });

当您使用 jQuery lib 时，请确保充分利用它，我已经看到您的代码中有原始的 javascript 语法。jQuery 旨在通过减少语法使事情变得更容易。

编辑： 我已经改进了代码，以便代码可以多次运行。

快乐编码:)

于 2013-07-19T10:35:28.597 回答
0 
$('#name').blur(function(){

触发模糊事件。

要侦听由用户制作的模糊事件：

$('#name').on("blur", function(){
于 2013-07-19T10:09:48.553 回答
0 
   if ($("#name").val('')) {

            $("#name").val('Name Please');
        }
   $('#name').focus(function () {
                if ($('#name').val() == 'Name Please') {
                    $('#name').val("");
                }

可以通过以下方式更改：

<input type="text" name="name" id="name" placeholder="Name Please" />

http://www.w3schools.com/tags/att_input_placeholder.asp

对于您的问题：

var fname = $("#name").val(); //jQuery style

$('#name').on("blur", function(){

    // we want element #name a range of letters

    var regexp = /^([A-Za-z])+$/;

    // if the element #name contains a range of letters defined in var regexp

    if (!nameRegex.test(fname)) {

        $("#name").addClass('redborder');

        return true;

    }

    // if the element #name is empty, does not contain string   
        if ( $("name").length === 0 ) {

        $("#name").addClass('redborder');

        return true;

    }

    // if we are still here, means that the element #name is valid

    $("#name").addClass('greenborder');

        return false;

} 

// on focus name input

$("#name").on("focus", function() {

    // if the input get the redborder class, then reset

    if ( fname.hasClass("redborder") ){

        fname.removeClass("redborder");

    }
}
于 2013-07-19T10:31:49.513 回答