哥们儿姐们儿，今天聊聊我最近捣鼓那个 `submitHandler` 的事儿。
起因是啥？
是这么回事儿，我之前在做一个挺普通的表单页面。你知道，就是用户填点信息，然后点个按钮提交。最开始嘛图省事，就用浏览器默认的那种提交方式，一点提交，整个页面“唰”一下就刷新，体验挺一般的。
需求来，说提交之前得先好好检查一下用户填的数据，格式对不对，必填的填没。行，咱就加上校验。我用那个挺流行的 jQuery Validate 插件，哐哐哐加上规则，确实能提示错误，挺
但是，问题又来。校验通过之后，它还是默认那种“咣当”一下刷新页面的提交方式。我就琢磨着，能不能搞得“润”一点？比如，校验通过后，我不刷新页面，就在后台默默把数据提交，然后给用户一个提示，告诉他成功或者失败。这不就是现在流行的 AJAX 提交嘛
咋发现 `submitHandler` 的？
我就开始翻那个校验插件的文档，看看有没有啥选项能让我自己控制提交过程。一开始试几个方法，效果都不太对。要么是校验之前就执行，要么就是根本阻止不默认提交。
折腾半天，终于在一个角落里，或者某个示例代码里，瞅见 `submitHandler` 这个东西。欸？这名字看起来就像是“提交处理程序”的意思！
动手实践过程
找到门路就好办。我赶紧看它是怎么用的。
大概是这样：
- 还是得先用那个 validate 方法初始化你的表单校验，把各种规则（`rules`）和提示信息（`messages`）都配
- 然后，在初始化的时候，加一个 `submitHandler` 的选项。这个选项后面跟的是一个函数。
- 关键就在这个函数里！文档说，这个函数只会在表单所有字段都通过校验之后才会被调用。而且一旦你定义 `submitHandler`，那个插件就不会再执行默认的表单提交动作。完美！这正是我想要的！
于是我就开始写 `submitHandler` 里面的代码：
第一步，在这个函数里，它会给你传一个参数，通常就是你那个 form 元素本身。我需要拿到表单里的数据。
第二步，我用 jQuery 的 `$(form).serialize()` 这个方法，一下子就把表单里所有需要提交的数据都整理成一个字符串，省事儿。
第三步，就是最核心的 AJAX 请求。我用 `$.ajax()`，设置好 `url`（要提交到的后台地址）、`type`（一般是 'POST'）、`data`（就是上一步拿到的表单数据），然后就是处理返回结果的回调函数。
第四步，在 `success` 回调里，我处理后台成功返回的情况，比如弹个成功的提示，或者清空一下表单，或者跳转到别的页面（虽然这回我没跳转）。在 `error` 回调里，处理失败的情况，比如告诉用户“提交失败，请重试”。
对，中间还遇到个小插曲。调试的时候，有时候不确定是校验没过，还是 `submitHandler` 里的 AJAX 写错。后来发现那个 validate 插件有个 `debug: true` 的选项，加上之后，它只校验，就算通过也不会真的去执行 `submitHandler`，方便我先把校验逻辑调再专心弄提交那块。
的效果
这么一通搞下来，效果立竿见影！
现在用户填完表单，点提交：
- 如果填写有误，旁边的错误提示立刻就出来。
- 如果填写没问题，页面就不再刷新！它会安安静静地在后台把数据送出去。
- 然后根据后台返回的结果，页面上会给个明确的提示，“搞定！”或者“出错！”。
整个过程流畅多，用户体验提升不少。感觉没白折腾。
这个 `submitHandler` 真是个好东西，特别适合在用前端校验之后，想自己控制表单怎么提交的场景，尤其是搞 AJAX 提交的时候，简直是绝配。分享给大家，希望对你们也有用。