Go html/template自定义FuncMap处理复选框出现ZgotmplZ异常

问题描述 #

使用Go的html/template时，自定义了FuncMap中的isChecked函数，用于在表单包含指定复选框时返回"checked"，否则返回空字符串。选中的复选框渲染正常，但未选中的复选框位置出现了ZgotmplZ字符串，生成的HTML示例如下：

<input type="checkbox" name="check2" id="checkbox" value="check2" ZgotmplZ>Check 2

相关代码如下：

main.go #

package main

import (
    "fmt"
    "html/template"
    "log"
    "net/http"
    "net/url"
)

var tpl *template.Template

func init() {
    tpl = template.Must(template.New("").Funcs(fm).ParseFiles("templates/check-box.html"))
}

var fm = template.FuncMap{
    "isChecked": isChecked,
}

func isChecked(checkName string, form url.Values) string {
    if form.Has(checkName) {
        return "checked"
    }
    return ""
}

func checkboxHandler(w http.ResponseWriter, r *http.Request) {
    err := r.ParseForm()
    if err != nil {
        log.Fatalln(err)
    }

    err = tpl.ExecuteTemplate(w, "check-box.html", r.Form)
    if err != nil {
        log.Fatalln(err)
    }
}

func main() {
    http.HandleFunc("/checkbox/", checkboxHandler)

    err := http.ListenAndServe(":8080", nil)
}

模板文件 check-box.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Control</title>
</head>
<body>

    <h1>Go html/template Form Handling - Checkbox</h1>

    <div>
    Form Data: {{.}}
    </div>

    <form action="/checkbox/" method="POST">

        <div>
            <label for="checkbox">Check Box</label>
            <input type="checkbox" name="check1" id="checkbox" value="check1" {{isChecked "check1" .}}>Check 1
            <input type="checkbox" name="check2" id="checkbox" value="check2" {{isChecked "check2" .}}>Check 2
            <input type="checkbox" name="check3" id="checkbox" value="check3" {{isChecked "check3" .}}>Check 3
        </div>

        <div>
            <button type="submit">Submit</button>
        </div>

    </form>

</body>
</html>

问题原因与解决方法 #

ZgotmplZ是Go模板引擎的标记，当渲染时遇到无法安全处理的内容（比如将空字符串直接作为HTML属性值输出），引擎会用该标记替代。因为isChecked返回的是普通字符串，当返回空时，模板无法正确识别为“无属性”，反而将其视为无效的属性内容。

解决方法是让函数返回template.HTML类型，明确告诉模板引擎返回的内容是安全的HTML代码，不需要转义：

修改后的isChecked函数和FuncMap如下：

import (
    // 保留其他导入
    "html/template"
)

var fm = template.FuncMap{
    "isChecked": isChecked,
}

func isChecked(checkName string, form url.Values) template.HTML {
    if form.Has(checkName) {
        return template.HTML("checked")
    }
    return template.HTML("")
}

这样修改后，未选中的复选框位置会输出空内容，不会出现ZgotmplZ。

其他复选框状态传递方法 #

1. 直接在模板中调用url.Values的Has方法 #

不需要自定义函数，模板中可以直接使用url.Values自带的Has方法判断：

<input type="checkbox" name="check1" id="checkbox" value="check1" {{if .Has "check1"}}checked{{end}}>Check 1

2. 传递结构化数据到模板 #

定义包含复选框状态的结构体，在handler中处理好状态后传递给模板：

type CheckboxData struct {
    Form          url.Values
    Check1Checked bool
    Check2Checked bool
    Check3Checked bool
}

func checkboxHandler(w http.ResponseWriter, r *http.Request) {
    err := r.ParseForm()
    if err != nil {
        log.Fatalln(err)
    }
    data := CheckboxData{
        Form:          r.Form,
        Check1Checked: r.Form.Has("check1"),
        Check2Checked: r.Form.Has("check2"),
        Check3Checked: r.Form.Has("check3"),
    }
    err = tpl.ExecuteTemplate(w, "check-box.html", data)
    if err != nil {
        log.Fatalln(err)
    }
}

模板中直接使用结构体字段：

<input type="checkbox" name="check1" id="checkbox" value="check1" {{if .Check1Checked}}checked{{end}}>Check 1

3. 使用模板块控制属性渲染 #

通过with或if块的方式，仅在选中时渲染checked属性：

<input type="checkbox" name="check1" id="checkbox" value="check1" {{with .Has "check1"}}checked{{end}}>Check 1

内容的提问来源于stack exchange，提问作者crizzo