如何在Purescript Halogen中手动触发表单外的输入验证

嘿，我完全懂你的困扰——当输入元素不在<form>标签里时，浏览器默认的表单验证触发逻辑确实用不上，但咱们完全可以借助原生DOM API手动触发验证，在Halogen里也能轻松实现！

下面给你一步步拆解解决方案：

1. 先收集输入元素的DOM引用 #

在Halogen里，你可以通过ref属性绑定每个带required的输入元素，把它们存到组件的State里方便后续调用。比如：

-- 先定义组件State，用来存储所有需要验证的输入元素引用
type State = { requiredInputs :: Array Element }

-- 渲染输入时绑定ref
render :: State -> HH.ComponentHTML Action Query
render state =
  HH.div_
    [ HH.input
        [ HH.type_ HH.InputText
        , HH.required true
        , HH.ref \el -> do
            -- 把当前输入元素添加到State的数组里
            modify_ \s -> s { requiredInputs = el : s.requiredInputs }
            pure unit
        ]
    , HH.input
        [ HH.type_ HH.InputEmail
        , HH.required true
        , HH.ref \el -> do
            modify_ \s -> s { requiredInputs = el : s.requiredInputs }
            pure unit
        ]
    -- 自定义触发验证的按钮
    , HH.button [ HH.onClick \_ -> TriggerValidation ] [ HH.text "检查必填项" ]
    ]

2. 手动触发验证并获取结果 #

核心是调用DOM元素的checkValidity()方法——这个方法会返回布尔值，表示元素是否符合验证规则（包括required的检查），同时浏览器还会弹出默认的错误提示（比如“请填写此字段”）。如果只是想静默检查不显示提示，可以用validity属性获取详细状态。

在组件的动作处理函数里，遍历收集到的输入元素，逐个验证并汇总结果：

-- 定义动作类型
data Action = TriggerValidation

-- 处理验证触发动作
handleAction :: Action -> HalogenM State Action Query Unit
handleAction = case _ of
  TriggerValidation -> do
    state <- get
    -- 遍历所有输入元素，调用原生验证方法
    validationResults <- traverse (\el -> liftEffect $ elementCheckValidity el) state.requiredInputs
    -- 汇总结果：所有输入都有效才返回true
    let allFieldsValid = all identity validationResults
    
    -- 这里可以根据结果做后续处理，比如提示用户或执行业务逻辑
    liftEffect $ log $ "所有必填项是否验证通过？" <> show allFieldsValid

3. 获取详细的验证错误信息 #

如果需要知道具体哪个输入无效、原因是什么，可以访问元素的validity属性，它会返回一个ValidityState对象，其中valueMissing字段就是专门标记“未填写必填项”的情况：

-- 封装一个获取验证详情的函数
getValidationInfo :: Element -> Effect ValidityState
getValidationInfo el = elementValidity el

-- 在处理函数里使用
handleAction = case _ of
  TriggerValidation -> do
    state <- get
    details <- traverse (\el -> liftEffect $ getValidationInfo el) state.requiredInputs
    -- 筛选出未填写的必填项
    let missingFields = filter (\info -> info.valueMissing) details
    liftEffect $ log $ "有" <> show (length missingFields) <> "个必填项未填写"

小提醒 #

• 记得维护好State里的输入元素数组，如果是动态生成的输入，要避免重复添加或者遗漏引用。
• 确保收集的ref都是有效的DOM元素，避免空引用导致的错误。

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