Question

我正在尝试了解处理程序如何在Google的UI服务中使用验证。

如果我有一个带按钮的文本框，我只想联系服务器，如果文本框是1）非空并且2）包含特定值，例如'Fred'如何创建一个验证函数，在允许serverhandler触发之前检查值是否为'Fred'？

一些示例代码：

function myValid() {

 //create the app
 var app = UiApp.createApplication();

 //set out UI in table
 var flex = app.createFlexTable()
  .setWidget(0, 0, app.createTextBox().setName('textbox').setId('textbox'))
  .setWidget(0, 1, app.createButton('Submit').setId('submit'))
  .setWidget(0, 2, app.createLabel().setId('status'));

 //server handler - fires only if textbox isn't empty
 var serverHandler = app.createServerHandler('submit')
  .validateLength(app.getElementById('textbox'), 1, null)
  .addCallbackElement(flex);

 //my custom handler to check the value of the textbox
 var myserverHandler = app.createServerHandler('myCheck')
 .addCallbackElement(flex);

 //client handler to display a message if textbox is empty
 var clientHandler = app.createClientHandler()
 .validateNotLength(app.getElementById('textbox'), 1, null)
 .forTargets(app.getElementById('status'))
 .setText('Cannot be empty');

  //add the handlers to the submit button
  app.getElementById('submit')
  .addClickHandler(serverHandler)
  .addClickHandler(myserverHandler)
  .addClickHandler(clientHandler);

 //add table to UI
 app.add(flex);
 //show app in the current spreadsheet
 var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 spreadsheet.show(app);
}

//check to see if textbox value is 'Fred'. If not display error

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

 if (e.parameter.textbox != "Fred")
  var errorLabel = app.createLabel("Incorrect Value");
 app.add(errorLabel);

 return app;
}

//If all validation passes then display message

function submit(e) {
 var app = UiApp.getActiveApplication();
 app.getElementById('status').setText('Server handler fired');
 return app;
}

我试图使用serverhandler来检查文本框值，但是clienthandler会更好。如何编写自定义客户端处理程序来检查'Fred'的文本框值？另外，如何在满足所有验证条件之前阻止serverhandler触发？

由于

Answer 1

解决方案比您的代码简单，只需一个服务器处理程序就可以使用validateNotMatches对“Fred”和ClientHandler进行单一验证。

以下代码。

function myValid() {
  var app = UiApp.createApplication();
  var textBox = app.createTextBox().setName('textbox').setId('textbox');
  var btn = app.createButton('Submit');
  var label = app.createLabel().setId('status');
  var flex = app.createFlexTable()
  .setWidget(0, 0, textBox)
  .setWidget(0, 1, btn)
  .setWidget(0, 2, label);
  var serverHandler = app.createServerHandler('submit')
  .validateMatches(textBox, 'Fred')
  .addCallbackElement(flex);
  var clientHandler = app.createClientHandler()
  .validateNotMatches(textBox, 'Fred').forTargets(label).setText('Missing or invalid value');
  btn.addClickHandler(serverHandler).addClickHandler(clientHandler);
  app.add(flex);
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  spreadsheet.show(app);
}

function submit(e) {
  var app = UiApp.getActiveApplication();
  app.getElementById('status').setText('Server handler fired');
  return app;
}

这段代码接受“包含”Fred的任何答案，如果你想要拒绝任何东西，除了“Fred”之外只需在textBox length == 4（validateLength,textBox,4,4）上添加验证，我不知道是什么你真的想...

修改：感谢您的接受，此编辑只是提到您还可以使用btn.setEnabled()和KeyUpHandler以及以下代码感兴趣的其他方法...选择是你的; - ）

function myValid() {
  var app = UiApp.createApplication();
  var textBox = app.createTextBox().setName('textbox').setId('textbox');
  var btn = app.createButton('Submit').setEnabled(false);
  var label = app.createLabel().setId('status');
  var flex = app.createFlexTable()
  .setWidget(0, 0, textBox)
  .setWidget(0, 1, btn)
  .setWidget(0, 2, label);
  var serverHandler = app.createServerHandler('submit')
  .validateMatches(textBox, 'Fred')
  .addCallbackElement(flex);
  btn.addClickHandler(serverHandler);
  var btnHandler = app.createClientHandler().validateMatches(textBox,'Fred').forTargets(btn).setEnabled(true);
  textBox.addKeyUpHandler(btnHandler);
  app.add(flex);
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  spreadsheet.show(app);
}

function submit(e) {
  var app = UiApp.getActiveApplication();
  app.getElementById('status').setText('Server handler fired');
  return app;
}

自定义验证功能

1 个答案: