使用Jquery焦点和模糊方法进行表单验证

时间:2013-07-19 10:04:01

标签: javascript jquery html css

我正在尝试使用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>

提前致谢

3 个答案:

答案 0 :(得分:1)

我已经改进了我们的代码并且它按照你的意图工作,在定义表中的元素时有几个错误,可能你可以查看我的代码如何定义它。

LIVE DEMO

HTML CODE:

<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 CODE:

$(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的设计通过减少语法使事情变得更容易。

<强>编辑: 我已经改进了代码,所以代码可以工作很多次。

快乐编码:)

答案 1 :(得分:0)

$('#name').blur(function(){

触发模糊事件。

收听用户提出的模糊事件:

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

答案 2 :(得分: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");

    }
}