Golang中如何使用"html/template"在前端显示错误信息

Golang中如何使用"html/template"在前端显示错误信息 我正在使用“html/template”包构建一个包含HTML表单的前端，在表单元素中，我设置了action="/"属性，用于提交POST请求并保存表单数据。数据保存到数据库的功能运行正常。 我想知道如何显示错误信息？ 我正在使用validator/v10包进行验证，我能够获取JSON响应中的错误信息，但不明白如何在前端渲染这些错误。

我知道需要创建一个函数ErrorsStub()，并将其传递到template.FuncMap中：

"errors": ErrorsStub,

然后在前端检查错误。 如何实现这一点？

编辑 添加一个代码示例

<form action="/" method = "post">
<input class="{{if errors}}border-red-600{{end}}" {{with .Name}}id="{{.}}"{{end}} type="{{.Type}}" name="{{.Name}}" placeholder="{{.Placeholder}}" {{with .Value}}value="{{.}}"{{end}}>     {{range errors}}       <p class="text-red-500 pt-2 text-xs italic">{{.}}</p>     {{end}}   
    <button class="bg-teal-400 hover:bg-teal-500 text-white font-bold py-2 px-4 rounded" type="submit">           Submit         </button>

这是我的form.html，它将被以下代码解析：

pageTpl := template.Must(template.New("").Funcs(template.FuncMap{
	"errors": ErrorsStub,
}).ParseFiles("form.gotmpl")

然后pageTpl会在“/”端点的GET请求中通过pageTpl.ExecuteTemplate执行，并将数据传递到模板中。

所有功能都已正常工作（我的端点已解析，数据正在保存到数据库）

我只需要实现：

func ErrorsStub() []string {
return []string{}
}

以便从后端获取错误信息，从而可以在模板前端显示这些错误。


更多关于Golang中如何使用"html/template"在前端显示错误信息的实战教程也可以访问 https://www.itying.com/category-94-b0.html

2 回复

为了获取来自后端的错误信息，以便能在我的前端模板中显示

我理解这意味着你必须以某种方式涉及JavaScript。或许可以通过另一个端点来实现。

W3Schools在线HTML编辑器

W3Schools在线HTML编辑器

W3Schools在线代码编辑器允许你编辑代码并在浏览器中查看结果

更多关于Golang中如何使用"html/template"在前端显示错误信息的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


要实现通过html/template在前端显示验证错误，需要将后端验证错误传递到模板执行的数据中。以下是具体实现方案：

首先，修改ErrorsStub函数，使其能够接收错误信息参数：

func ErrorsStub(errors []string) []string {
    return errors
}

然后，在模板函数映射中注册这个函数：

funcMap := template.FuncMap{
    "errors": ErrorsStub,
}

pageTpl := template.Must(template.New("").Funcs(funcMap).ParseFiles("form.gotmpl"))

在处理器中，当验证失败时收集错误信息并传递给模板：

func formHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method == http.MethodPost {
        // 解析表单数据
        err := r.ParseForm()
        if err != nil {
            http.Error(w, "Bad Request", http.StatusBadRequest)
            return
        }
        
        // 进行验证（使用validator/v10）
        var validationErrors []string
        // 假设使用validator进行验证
        // if validation fails, append to validationErrors
        
        // 如果有验证错误，重新渲染表单并显示错误
        if len(validationErrors) > 0 {
            data := struct {
                Errors []string
                // 其他表单数据字段
            }{
                Errors: validationErrors,
            }
            
            pageTpl.ExecuteTemplate(w, "form.gotmpl", data)
            return
        }
        
        // 验证通过，处理数据
        // ... 保存到数据库等操作
        
        http.Redirect(w, r, "/success", http.StatusSeeOther)
        return
    }
    
    // GET请求，显示空表单
    pageTpl.ExecuteTemplate(w, "form.gotmpl", nil)
}

在模板中使用这个函数：

<form action="/" method="post">
    <input 
        class="{{if .Errors}}border-red-600{{end}}" 
        type="text" 
        name="username" 
        placeholder="用户名"
        {{with .FormData.Username}}value="{{.}}"{{end}}
    >
    
    {{if .Errors}}
        {{range errors .Errors}}
            <p class="text-red-500 pt-2 text-xs italic">{{.}}</p>
        {{end}}
    {{end}}
    
    <button class="bg-teal-400 hover:bg-teal-500 text-white font-bold py-2 px-4 rounded" type="submit">
        提交
    </button>
</form>

如果需要为每个字段单独显示错误，可以创建更结构化的错误数据：

type FormData struct {
    Username string
    Email    string
    // 其他字段
}

type FormErrors struct {
    Username []string
    Email    []string
    // 其他字段错误
    General []string
}

type TemplateData struct {
    FormData FormData
    Errors   FormErrors
}

然后在处理器中：

func formHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method == http.MethodPost {
        // 解析和验证
        formData := FormData{
            Username: r.FormValue("username"),
            Email:    r.FormValue("email"),
        }
        
        errors := FormErrors{}
        
        // 验证用户名
        if formData.Username == "" {
            errors.Username = append(errors.Username, "用户名不能为空")
        }
        
        // 验证邮箱
        if !isValidEmail(formData.Email) {
            errors.Email = append(errors.Email, "邮箱格式不正确")
        }
        
        // 如果有错误，重新渲染
        if hasErrors(errors) {
            data := TemplateData{
                FormData: formData,
                Errors:   errors,
            }
            pageTpl.ExecuteTemplate(w, "form.gotmpl", data)
            return
        }
        
        // 处理成功的情况
    }
    
    // GET请求
    pageTpl.ExecuteTemplate(w, "form.gotmpl", TemplateData{})
}

在模板中针对每个字段显示错误：

<input 
    class="{{if .Errors.Username}}border-red-600{{end}}" 
    type="text" 
    name="username" 
    value="{{.FormData.Username}}"
>
{{range .Errors.Username}}
    <p class="text-red-500 pt-2 text-xs italic">{{.}}</p>
{{end}}

这样就能在表单提交验证失败时，将具体的错误信息显示在对应的表单字段下方。

回到顶部