Jquery 创建将用于输入验证的函数

Posted 2023-03-05

【中文标题】Jquery 创建将用于输入验证的函数

【英文标题】：Jquery creating a function that will be used for input validation

【发布时间】：2017-02-16 11:14:54

【问题描述】：

我在这里有一个文本框，当输入无效时显示错误。我想知道如何制作一个在两个范围内显示错误的函数，这样我就可以防止冗余。这是我的html文件

<div class="form-group row has-feedback" id="username-group">
            <div class="col-sm-4"><label class="control-label">Username</label></div>
            <div class="col-sm-8">
              <div>
                <input type="text" name="username" id="username" value="<?php echo $username;?>" class="form-control user-required" required>
                <span id="username-feedback" class="glyphicon form-control-feedback hidden"></span>
              </div>
              <div><span class="small font-design error_span"><?php if(isset($usernameErr))echo $usernameErr; ?></span></div>
            </div>
          </div>

这是迄今为止我在类 error_span 的跨度中所做的

function checkEmpty(id)
  if($(id).val()=="")
    $(id)[0].setCustomValidity('Please fill out this field');
    $(id).closest('.form-group').find('.error_span').text("Please fill out this field").removeClass("hidden").addClass("text text-danger");
  
  else
    $(id)[0].setCustomValidity('');
    $(id).closest('.form-group').find('.error_span').text("").addClass("hidden").addClass("text text-danger");
  

$(".user-required").blur(function()
  checkEmpty("#" + $(this).attr('id'));
);

我认为多余的代码在这里。它会在文本框中添加一个反馈图标。

if($("#username").val()==existing)
          $("#username-feedback").addClass("glyphicon-remove");
          $("#username-feedback").removeClass("glyphicon-ok hidden");
          $("#username-group").removeClass("has-success");
          $("#username-group").addClass("has-error");
          $("#username")[0].setCustomValidity('username not available');
          $("#username").closest('.form-group').find('.error_span').text("username not available").removeClass("hidden").addClass("text text-danger");
        
        else
          $("#username-feedback").addClass("glyphicon-ok");
          $("#username-feedback").removeClass("glyphicon-remove hidden");
          $("#username-group").removeClass("has-error");
          $("#username-group").addClass("has-success");
          $("#username")[0].setCustomValidity('');
          $("#username").closest('.form-group').find('.error_span').text("").addClass("hidden");
        
$("#username").blur(function()
    if($("#username").val()=="")
      $("#username-feedback").addClass("glyphicon-remove");
      $("#username-feedback").removeClass("glyphicon-ok hidden");
      $("#username-group").removeClass("has-success");
      $("#username-group").addClass("has-error");
      $("#username")[0].setCustomValidity('Please fill out this field');
      $("#username").closest('.form-group').find('.error_span').text("Please fill out this field").removeClass("hidden").addClass("text text-danger");
    
  );

由于我对 jquery 选择器知之甚少，有人可以帮助我在创建函数时遇到麻烦

【问题讨论】：

您能否更具体地说明您的问题是什么？

所有这些代码都是输入验证。我将在我的所有表单中使用很多我想为此创建可重用函数但我不知道该怎么做我已经创建了一个函数：checkEmpty() 但我想将 has-feedback 类添加到另一个跨度我想不出可以使用的jquery选择器

【参考方案1】：

function saveForm()
		
		var lenName = $('#nameInput').val().length;
		
		
		if (lenName <= 0) 	
			$( ".alert" ).text("Error submiting the form, please fill all the fields!");
            $( ".alert" ).show();
        
		else
			$( ".alert" ).hide();
			$( "#form" ).submit();
		
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="form" action="test.html" method="post" id="form">

		 <div class="alert" style="display: none;"></div>
		<input name="name" type="text" class="form-control" id="nameInput" placeholder="Name">
	
    <br>
	<button type="button" onclick="saveForm()">Submit</button>

</form>

你可以在函数中做更多的验证这是一个简单的例子。