Question

我测试了我从某人那里获得的新JQuery版本，现在根本没有任何作用。我不知道我做错了什么。我再次使用Bootstrap。

的Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$('#first').keyup( function(){
    var x=document.forms["signup"]["first"].value;
    if(x.length<3 || x.length>16) {
        $('#errornote').html('<p class="bg-danger">You need to enter your first name.</p>')
    }
})

$('#email').keyup( function(){
    var x=document.forms["signup"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      {
        $("#eemail").attr("class","alert alert-warning alert-dismissable flyover flyover-centered");
        $("#eemail").append("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
        <strong>Warning!</strong> Best check yo self, youre not looking too good.");
        return false;
      }
})

HTML

<form action="#" class="form" id="signup" role="form">   <legend>Sign Up</legend>
                    <h4>Its free and always will be.</h4>
                    <div class="row">
                        <div class="col-xs-6 col-md-6" id="first">
                            <input type="text" id="first" name="firstname" value="" class="form-control input-lg" placeholder="First Name"  /></div>
                        <div class="col-xs-6 col-md-6" id="last">
                            <input type="text" id="last" name="lastname" value="" class="form-control input-lg" placeholder="Last Name"  /></div>
                    </div>
                    <div id="email"><input type="text" id="email" name="email" value="" class="form-control input-lg" placeholder="Your Email"  /></div>
                    <div id="eemail"></div>

Answer 1

这是我使用jQuery进行表单验证的方法： http://jsfiddle.net/j63PC/

我使用$("#check").on('input')检查输入字段何时发生变化：

Answer 2

以下是代码段：http://jsfiddle.net/gutigrewal/Sm28x/

当然，这是一个例子，因为你的代码看起来有点冗长让我调查。看看我的内容是否能让您了解代码无效的原因。此示例仅允许数字/数字。其他任何内容都会在输入上方插入错误文本。当然，我没有重置错误等等。这只是一个基本的例子。

示例html：

<div class="container">
  <form id="testform">
     <span id="errornote"></span>
         <input type="text" id="txttest">
</form>
</div>

在javascript中：使用jquery插件

$('#txttest').keyup( function(){
    if( /\D+/.test( $(this).val() )) {
        $('#errornote').html('<font color="red">Non numeric added: Only numerics allowed</font>')
    }
})

Answer 3

使用$（document）.ready（）编写代码，如下所示：

  $(document).ready(function(){
   $('#first').keyup( function(){
      var x=document.forms["signup"]["first"].value;
     if(x.length<3 || x.length>16) {
    $('#errornote').html('<p class="bg-danger">You need to enter your first name.</p>')
    }
  });

$('#email').keyup( function(){
var x=document.forms["signup"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
    $("#eemail").attr("class","alert alert-warning alert-dismissable flyover flyover-centered");
    $("#eemail").append("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
    <strong>Warning!</strong> Best check yo self, youre not looking too good.");
    return false;
      }
   });

 });

如何在人员输入时验证表格？

3 个答案: