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

Question

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

First Name & Last Name 应该只接受字母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' });
     }
)};

上面的方法我都试过了，但是按钮还是可见的

Answer 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>