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

Question

当前我正在使用提交按钮以及一些窗口小部件和关联的客户端/服务器处理程序。点击提交按钮后，数据将使用发布请求发送。

现在我想要做上述所有，但以不同的方式。

首先，我不希望客户机/服务器处理，对少数部件这些都是很好的，但对于许多小部件这些都是令人困惑。

现在我只想写一个验证处理程序，应该在提交按钮点击被调用，处理程序应该在Widget中，如果一切都很好的输入值发送的数据显示其他错误警告。

，我们可以创建和发送自定义POST请求，而不是使用提交按钮的？

我使用了UiApp我的web应用程序。

如何实现这一目标？谁能帮我？

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文件： MA1更新

一个变种后

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

编辑第二个选项：与提交按钮关联一个完成所有工作的服务器处理程序。 如果数据正确，它们将被处理。 如果不是，则会向用户显示警告。

演示：

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); 
    } 
}