google-apps-script - 布尔运算符和 ClientHandler

Question

是否可以使用客户端处理程序来确定 2 个文本框是否都是空的，或者都包含一个值但不包含一个或另一个？

目前我正在使用服务器处理程序来测试这种情况，但为了速度我宁愿使用客户端处理程序。

if ((textbox1 == '' && textbox2 == '') || (textbox1 != '' && textbox2 != ''))
  //do something
else
  //display error 'both boxes must either be empty or contain a value

干杯戴夫

一些示例代码：

function genObsReport() {
 var myapp = UiApp.createApplication().setTitle('Report');   
 var dateFrom = myapp.createDateBox().setId("dateFrom");  
 var dateTo = myapp.createDateBox().setId("dateTo");   

 var mygrid = myapp.createGrid(2, 2); 
 mygrid.setWidget(0, 0, myapp.createLabel('Date from'));
 mygrid.setWidget(0, 1, dateFrom);
 mygrid.setWidget(1, 0, myapp.createLabel('Date to'));
 mygrid.setWidget(1, 1, dateTo);

 var errors = myapp.createLabel('Error').setId('errors').setVisible(false);  
 var mybutton = myapp.createButton('Create Report');

 var mypanel = myapp.createVerticalPanel();     
 mypanel.add(mygrid);
 mypanel.add(mybutton);

 mypanel.add(errors);
 myapp.add(mypanel);  

 var handler = myapp.createServerHandler("change");
 handler.addCallbackElement(mygrid);  
 mybutton.addClickHandler(handler);

 var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 spreadsheet.show(myapp);  
}

function change(eventInfo) {
 var app = UiApp.getActiveApplication();    
 var dateFrom = eventInfo.parameter.dateFrom;
 var dateTo = eventInfo.parameter.dateTo;

 // check the dates
 if ((dateFrom == '' && dateTo == '') || (dateFrom != '' && dateTo != '')) {
    //do something
 } else {
   //show errors
   app.getElementById('errors').setVisible(true);
   app.getElementById('dateFrom').setStyleAttributes({background: "red", color: "black"});
   app.getElementById('dateTo').setStyleAttributes({background: "red", color: "black"});
 } 
}

score 1 · Accepted Answer

是的 - 这是可能的 - 尽管我想出的东西肯定是笨拙的。这是我的逻辑：

给定一个 texbox，添加两个检查长度的客户端处理程序 - 一个检查长度为 0，另一个检查长度为 1 或更多。根据发生的情况将隐藏文本框中的值更改为 0 或 1。对第二个文本框使用不同的隐藏文本框重复此操作。根据两个隐藏文本框的总和创建两个新的验证器来启用或禁用您的按钮。虽然它应该可以工作，因为文档说处理程序是按照添加的顺序完成的，但为了额外的安全，我在按钮本身上添加了另一个处理程序。我在这里抛出了一些更好的代码，添加了一些额外的标签和格式以使其更加明显，但是这里的代码有点长，所以几乎低于你需要的最小值。这是最终的工作产品

function doGet() {
  var app = UiApp.createApplication();


  var button = app.createButton('Click Me');
  app.add(button);

  var tb1=app.createTextBox().setId('tb1').setName('tb1');
  var tb2=app.createTextBox().setId('tb2').setName('tb2');
  //Hide these two - but i left them visible so you can see the script in action.
  var tbValidatorForTb1=app.createTextBox().setId('tb3').setName('tb3');
  var tbValidatorForTb2=app.createTextBox().setId('tb4').setName('tb4');
  var label = app.createLabel('The button was clicked.')
                 .setId('statusLabel')
                 .setVisible(false);
  app.add(label);
  app.add(tb1);
  app.add(tb2);

  app.add(tbValidatorForTb1);
  app.add(tbValidatorForTb2);
  //Set your validators for your first textbox
  var clientHandler1=app.createClientHandler().validateLength(tb1, 1, 200).forTargets(tbValidatorForTb1).setText('1');
  var clientHandler2=app.createClientHandler().validateLength(tb1,0, 0).forTargets(tbValidatorForTb1).setText('0');

  //Set your validators for your second textbox
  var clientHandler3=app.createClientHandler().validateLength(tb2, 1, 200).forTargets(tbValidatorForTb2).setText('1');
  var clientHandler4=app.createClientHandler().validateLength(tb2, 0, 0).forTargets(tbValidatorForTb2).setText('0');
  tb1.addKeyUpHandler(clientHandler1);
  tb1.addKeyUpHandler(clientHandler2);
  tb2.addKeyUpHandler(clientHandler3);
  tb2.addKeyUpHandler(clientHandler4);
  tb2.addKeyUpHandler(clientHandler1);
  tb2.addKeyUpHandler(clientHandler2);
  tb1.addKeyUpHandler(clientHandler3);
  tb1.addKeyUpHandler(clientHandler4);



  //Now create some client handlers to do the actual enable/disable of the button


  var finalDisableValidator=app.createClientHandler().validateSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button).setEnabled(false);
  var finalEnableValidator=app.createClientHandler().validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button).setEnabled(true);

  tb1.addKeyUpHandler(finalDisableValidator);
  tb1.addKeyUpHandler(finalEnableValidator);
  tb2.addKeyUpHandler(finalDisableValidator);
  tb2.addKeyUpHandler(finalEnableValidator);

  //tb4.addChangeHandler(finalEnableValidator)
  var handler = app.createServerHandler('myClickHandler').validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1);
  handler.addCallbackElement(label);
  button.addClickHandler(handler);

  return app;
}

function myClickHandler(e) {
  var app = UiApp.getActiveApplication();

  var label = app.getElementById('statusLabel');
  label.setVisible(true);

  app.close();
  return app;
}

我错过了日期框 - 所以下面是适用于日期框的代码。一对夫妇的笔记

日期框上的长度检查无法正常工作，由于某种原因它们会引发错误。我对“-”字符使用了正则表达式测试。如果您的日期格式不同，您可能需要更改此设置。
您需要为无效日期触发事件以处理空字段
最后，您需要使用 valuechange 处理程序，因为它被正确指出它没有 onkeyup

下面是这个的代码

function doGet() {
  var app = UiApp.createApplication();


  var button = app.createButton('Click Me');
  app.add(app.createLabel("This demonstrates using clienthandlers to require either neither or both fields to be populated before the button can be clicked"));
  var validationWarning=app.createLabel("Please enter a value in both fields or neither field").setId('warningLabel').setStyleAttribute('color', "red").setVisible(false);
  app.add(button);
  app.add(validationWarning);
  var panel = app.createVerticalPanel();


  // db1.addValueChangeHandler(handler);

  var tb1=app.createDateBox().setId('tb1').setName('tb1');
  var tb2=app.createDateBox().setId('tb2').setName('tb2');
  //Hide these two - but i left them visible so you can see the script in action.
  var tbValidatorForTb1=app.createTextBox().setId('tb3').setName('tb3').setEnabled(false);
  var tbValidatorForTb2=app.createTextBox().setId('tb4').setName('tb4').setEnabled(false);
  var label = app.createLabel('The button was clicked.')
                 .setId('statusLabel')
                 .setVisible(false);


  panel.add(label);

  var grid1=app.createGrid(2, 2);
  grid1.setWidget(0, 0, app.createLabel("Field 1"));
  grid1.setWidget(0, 1, app.createLabel("Field 2"));
  grid1.setWidget(1, 0,tb1);
  grid1.setWidget(1, 1,tb2);
  panel.add(grid1);

    var grid2=app.createGrid(2, 2);
  grid2.setWidget(0, 0, app.createLabel("Validator 1"));
  grid2.setWidget(0, 1, app.createLabel("Validator 2"));
  grid2.setWidget(1, 0,tbValidatorForTb1);
  grid2.setWidget(1, 1,tbValidatorForTb2);
  panel.add(grid2);

  app.add(panel);
  //Set your validators for your first textbox
//  var dateHandler1=app.createClientHandler().validateInteger(tb1).forTargets(tbValidatorForTb1).setText('1');
//  var dateHandler2=app.createClientHandler().validateInteger(tb1).forTargets(tbValidatorForTb2).setText('1');

  var clientHandler1=app.createClientHandler().validateMatches(tb1,'\-').forTargets(tbValidatorForTb1).setText('1');
  var clientHandler2=app.createClientHandler().validateNotMatches(tb1, '\-').forTargets(tbValidatorForTb1).setText('0');

  //Set your validators for your second textbox
  var clientHandler3=app.createClientHandler().validateMatches(tb2,'\-').forTargets(tbValidatorForTb2).setText('1');
  var clientHandler4=app.createClientHandler().validateNotMatches(tb2,'\-').forTargets(tbValidatorForTb2).setText('0');
  //tb1.addValueChangeHandler(handler)
   tb1.addValueChangeHandler(clientHandler1);
  tb1.addValueChangeHandler(clientHandler2);
  tb2.addValueChangeHandler(clientHandler3);
  tb2.addValueChangeHandler(clientHandler4);
 tb2.addValueChangeHandler(clientHandler1);
  tb2.addValueChangeHandler(clientHandler2);
 tb1.addValueChangeHandler(clientHandler3);
 tb1.addValueChangeHandler(clientHandler4);

  //Now create some client handlers to do the actual enable/disable of the button
  tb1.setFireEventsForInvalid(true);
    tb2.setFireEventsForInvalid(true);
  var finalDisableValidator=app.createClientHandler().validateSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button).setEnabled(false).forTargets(validationWarning).setVisible(true);
  var finalEnableValidator=app.createClientHandler().validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1).forTargets(button).setEnabled(true).forTargets(validationWarning).setVisible(false);

  tb1.addValueChangeHandler(finalDisableValidator);
  tb1.addValueChangeHandler(finalEnableValidator);
  tb2.addValueChangeHandler(finalDisableValidator);
  tb2.addValueChangeHandler(finalEnableValidator);

  //tb4.addChangeHandler(finalEnableValidator)
  var handler = app.createServerHandler('myClickHandler').validateNotSum([tbValidatorForTb1,tbValidatorForTb2], 1);
  handler.addCallbackElement(label);
  button.addClickHandler(handler);

  return app;
}

function myClickHandler(e) {
  var app = UiApp.getActiveApplication();

  var label = app.getElementById('statusLabel');
  label.setVisible(true);

  app.close();
  return app;
}

google-apps-script - 布尔运算符和 ClientHandler

1 回答 1

Related

Reference