Question

目前我正在使用带有一些小部件和关联的客户端/服务器处理程序的“提交”按钮。单击“提交”按钮后，将使用“发布请求”发送数据。

现在我想以不同的方式完成上述所有工作。

首先，我不想要客户端/服务器处理程序，对于少量的小部件，这些都是好的，但对于许多小部件来说，这些都是令人困惑的。

现在我只想写一个单独的验证处理程序，应该在Submit按钮上单击调用，处理程序应该是小部件中的输入值，如果一切正常，则发送数据，否则显示错误警告。

我们可以创建并发送自定义POST请求而不是使用“提交”按钮吗？

我正在使用UiApp作为我的网络应用。

如何实现这一目标？任何人都可以帮助我吗？

Answer 1

如果您使用的是UiApp或HTML服务，则无法确定。

在UiApp中，我可以为您提出建议：
您可以向您的元素添加clientHandler并直接检查数据是否正确（如果所有数据都正确，则可以显示提交按钮）为例：

function doGet(){
  var app = UiApp.createApplication();
  var email = app.createTextBox().setId("text").setName("text").setValue("enter a vaild email");
  var field1 = app.createTextBox().setId("notNum").setName("notNum");
  var submitButt = app.createButton("submit").setEnabled(false);

  var emailhandler1 = app.createClientHandler().validateEmail(email).forEventSource().setStyleAttribute("color", "green");
  var emailhandler2 = app.createClientHandler().validateNotEmail(email).forEventSource().setStyleAttribute("color", "red").forTargets(submitButt).setEnabled(false);
  var fieldhandler1 = app.createClientHandler().validateNotLength(field1, 1, 100).forTargets(submitButt).setEnabled(false);
  var fieldhandler2 = app.createClientHandler().validateInteger(field1).forTargets(submitButt).setEnabled(false);
  var finalhandler = app.createClientHandler().forTargets(submitButt).validateLength(field1, 1, 100).validateNotNumber(field1).validateEmail(email).setEnabled(true);

  email.addChangeHandler(emailhandler1).addChangeHandler(emailhandler2).addChangeHandler(finalhandler);
  field1.addChangeHandler(fieldhandler1).addChangeHandler(fieldhandler2).addChangeHandler(finalhandler);
  app.add(app.createLabel("email: ")).add(email).add(app.createLabel("text (no number)")).add(field1).add(submitButt);
  return(app);
}

您还可以使用服务器处理程序检查所有数据，最后显示提交按钮：

function doGet(){
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  var formPanel = app.createFormPanel().add(panel);

  var email = app.createTextBox().setId("email").setName("email").setValue("enter a vaild email");
  var field1 = app.createTextBox().setId("notNum").setName("notNum");
  var validateButt = app.createButton("validate data").setId("validateButton");
  var submitButt = app.createButton("submit").setId("submit").setVisible(false);

  validateButt.addClickHandler(app.createServerHandler("checkdata").addCallbackElement(formPanel));

  panel.add(app.createLabel("email: ")).add(email).add(app.createLabel("text (no number)")).add(field1).add(validateButt).add(submitButt);
  app.add(formPanel);
  return(app);
}

function checkdata(e){
  var app = UiApp.getActiveApplication();
  var pattEmail = new RegExp(/([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})/);
  var pattTxt = new RegExp(/[^0-9]+/);
  Logger.log("email: "+e.parameter.email+" text: "+e.parameter.notNum);
  if(pattEmail.test(e.parameter.email) && pattTxt.test(e.parameter.notNum)){
    app.getElementById("validateButton").setVisible(false);
    app.getElementById("submit").setVisible(true);
  }
  else{
    Logger.log("not valid");
  }
  return(app);
}

但是（在我看来）最好的方法是使用html服务（因为它不再是开发模式）：

脚本文件：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("html");
}

html文件：

<div>
<form>
email:<br>
<input type="text"/ id="email" name="email" onchange="checkEmail();"><br>
text:<br>
<input type="text"/><br>
<input type="submit" value="submit"/>
</form>
</div>
<script>
function checkEmail(){
  var email = document.getElementById("email").value;
  var pattEmail = new RegExp(/([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})/);
  if(pattEmail.test(email)){
    document.getElementById("email").style.color = "green";
  }
}
</script>

MA1更新后编辑

第二个选项的变体：与执行所有工作的服务器处理程序关联的提交按钮。如果数据正确，则处理它们。如果不是，则向用户显示警告。

演示：

function doGet(){
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel().setId("panel");
  var formPanel = app.createFormPanel().add(panel);
  var email = app.createTextBox().setId("email").setName("email").setValue("enter a vaild email");
  var validateButt = app.createButton("submit").setId("validateButton");
  validateButt.addClickHandler(app.createServerHandler("checkAndValData").addCallbackElement(formPanel));
  panel.add(app.createLabel("email: ")).add(email).add(validateButt);
  app.add(formPanel);
  return(app);
}

function checkAndValData(e){
  var app = UiApp.getActiveApplication();
  var pattEmail = new RegExp(/([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})/);
  if(!pattEmail.test(e.parameter.email)){
    app.getElementById("email").setStyleAttribute("color", "red")
    return(app);
  }
  else{
    Logger.log("Do something with the data");
    app.getElementById("panel").add(app.createLabel("your data are are processed"));
    return(app);
  }
}

Google Apps脚本：自定义输入验证处理程序和POST请求

1 个答案: