如果正则表达式在使用 jQuery 的handsontable 中无效，则禁用按钮

Posted 2023-03-22

【中文标题】如果正则表达式在使用 jQuery 的handsontable 中无效，则禁用按钮

【英文标题】：Disable Button if regular expression is not valid inside handsontable using jQuery

【发布时间】：2019-08-18 23:11:57

【问题描述】：

我需要在这里验证三个字段 First Name , Last Name , & Email 仅当这些值有效或所有字段为空时，它应该显示**Next** 按钮。所有这些目标列值都来自 Api。

名字和姓氏应该只接受字母 Email应该是Email格式的正常

dataObject.forEach(function (item) 
   var regex = /^[0-9]+$/;                        
   var emailReg = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]0,66)\.([a-z]2,6(?:\.[a-z]2)?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]2\.|[0-9]1,2\.))((25[0-5]|2[0-4][0-9]|1[0-9]2|[0-9]1,2)\.)2(25[0-5]|2[0-4][0-9]|1[0-9]2|[0-9]1,2)\]?$)/;

if (item.TargetColumn == "First Name" && item.DefaultValue.match(regex)) 
         $('#importNext').css( 'display':'none');
         alert("First Name is not valid")                           
          else if (item.TargetColumn == "First Name" && item.DefaultValue == "")
            console.log("Success");
            $('#importNext').css( 'display': 'block' );
     

   if (item.TargetColumn == "Last Name" && item.DefaultValue.match(regex)) 
         $('#importNext').css( 'display':'none');
         alert("Last Name is not valid")                           
          else if (item.TargetColumn == "Last Name" && item.DefaultValue == "")
            console.log("Success");
            $('#importNext').css( 'display': 'block' );
     

   if (item.TargetColumn == "Email" && !item.DefaultValue.match(emailReg)) 
         $('#importNext').css( 'display':'none');
         alert("Email is not valid")                           
          else if (item.TargetColumn == "Email" && item.DefaultValue == "")
            console.log("Success");
            $('#importNext').css( 'display': 'block' );
     
);

我已经尝试过上面的方法，但按钮仍然可见

【问题讨论】：

您好，您能就我的回答更新一下吗？ @chethu

@Prabusamvel 仍然存在同样的问题，如果任何一个条件满足，它就会显示“下一步”按钮，即使也存在一些无效值，也无法隐藏按钮

【参考方案1】：

希望对你有帮助。

var fields = ["First_Name", "Last_Name", "Location", "Email", "Experience", "ID"];
var fields_data = ;
  
  $(document).ready(function() 
	
	var html = "";
		
	fields.forEach(function(field)
		html += "<tr>";
		html += "<td style='text-align:right;'>"+field+":</td>";
		html += "<td><input type='text' class='tableFields' data-field='"+field+"'></td>";
		html += "</tr>";
	);
	
	html += "<tr>";
	html += "<td></td>"
	html += "<td style='text-align:center;'><button id='next-button'>Next</button></td>";
	html += "</tr>";
	
	$("#form-table").html(html);
	
	var err = 0;
	
	$("#form-table").on('change', '.tableFields', function(e)
		var field = $(this).data('field');
		var value = $(this).val();
		
		fields_data[field] = value;
		
		var text_space_regex = /^[a-zA-Z\s]*$/; 
		var email_regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]2,))$/;
		
		switch(field)
		  case 'First_Name':
		  case 'Last_Name':
			if(value && !text_space_regex.test(value))
				alert(field+" should accept only text!");
				err++;
			else
				err -= (err===0) ? 0 : 1;
			
		  break;  
		  
		  case 'Email':
			if(value && !email_regex.test(value))
				alert(field+" is invalid!");
				err++;
			else
				err -= (err===0) ? 0 : 1;
			
		  break;
		
		
		if(err > 0)
			$("#next-button").hide();
		else
			$("#next-button").show();
		
		
	);
	
	$("#form-table").on('click', '#next-button', function(e)
		alert("success! (look at console for data)");
		console.log(fields_data);
	);
	
  );

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

<div style="margin-top:25px;">
   <table id="form-table"></table>
</div>