Question

如何验证下面的输入（姓名和年龄）？例如。不允许空输入，最大年龄从0到100和最大长度？我今天刚开始研究JavaScript / JQuery。

<form action="#">
    <fieldset>
       <div class="textinput">
            <label for="name">Your name:</label>
            <input type="text" name="name">
        </div>

        <div class="textinput">
            <label for="name">Your age:</label>
            <input type="text" name="age">
        </div>

        <div class="textareainput">
            <label for="info">About yourself:</label>
            <textarea></textarea>
        </div>

        <div class="action">
            <button>Submit</button>
        </div>
    </fieldset>
</form>

我希望这不是一个糟糕的问题。如果是，请告诉我downvote的原因，以便我可以改进我未来的帖子。

Answer 1

我认为这就是你想要的。您可以使用许多库（验证）来验证脚本。但是如果你想以自己的方式做到这一点，试试这个。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	
<form action="#">
        <fieldset>
           <div class="textinput">
                <label for="name">Your name:</label>
                <input type="text" name="name" id="nameid">
            </div>

            <div class="textinput">
                <label for="name">Your age:</label>
                <input type="text" name="age" id="ageid">
            </div>

            <div class="textareainput">
                <label for="info">About yourself:</label>
                <textarea id="textareaid"></textarea>
            </div>
            <h3 style="color:red;font-family:monospace;" id="warning"></h3>
            <div class="action">
                <input type="button" value="submit" id="click">
            </div>
        </fieldset>
    </form>
	
</body>

<script type="text/javascript">
   $("#click").click(function(){
   	  $("#warning").text("");
   	  var namefield = $("#nameid").val();
   	  var agefield = $("#ageid").val();
   	  var texarefield = $("#textareaid").val();

   	  if (namefield == "" || agefield == "" || texarefield == "") 
   	  {
   	  	  $("#warning").text("all field sholud be fill");
   	  }
      else if (namefield != "" && agefield != "" && texarefield != "") 
      {
      	  var ageInteger = parseInt(agefield);

      	  if (ageInteger < 0 || ageInteger > 100) 
      	  {
      	  	  $("#warning").text("age should be between 0 and 100");
      	  }
      	  else
      	  {
      	  	$("#warning").text("");
      	  }
      }

      else
      {
      	$("#warning").text("");
      }

   });
</script>
</html>

＆＃13;

这是非常基本和简单的验证。这对您有帮助。

Answer 2

您可以使用https://jqueryvalidation.org/

HTML不需要更改。见https://jqueryvalidation.org/validate/#rules

验证表单中的输入

2 个答案: