求助：TypeError: is not a function - val()错误排查指引

刚看到你遇到了这个报错，我之前帮不少开发者排查过这类问题，核心原因其实很明确：你调用val()方法的对象，根本不具备这个方法。下面是几个具体的排查方向，一步步来就能找到问题：

• 先确认调用val()的对象是什么类型
  很多时候是混用了原生JS和jQuery的写法：比如你用document.getElementById('username')拿到了原生DOM元素，然后直接调用val()——但原生DOM元素根本没有这个方法，只有jQuery包装后的对象才有。
  你可以在调用val()前加一行console.log(你的对象)，如果打印出来是HTMLInputElement这类原生节点，那解决方案很简单：要么把它转成jQuery对象再调用，比如$(你的原生DOM元素).val()；要么直接用原生的value属性，比如你的原生DOM元素.value。

• 检查jQuery是否正确加载
  如果你的代码依赖jQuery的val()，但jQuery没加载成功，那$可能不是你以为的jQuery函数，获取的对象自然也没有val()方法。
  你可以打开浏览器控制台，输入jQuery或者$回车，如果返回undefined，那就是加载出问题了——检查一下引入jQuery的script标签路径是否正确，有没有把它放在你的业务代码之前加载。

• 验证选择器是否真的选中了元素
  有时候你写了$('#some-id')，但页面里根本没有这个ID的元素，或者选择器写错了（比如类选择器漏了.，标签选择器拼错了）。虽然空的jQuery对象调用val()不会报错，但如果是你误把其他非jQuery对象当成了选中的元素，就会触发这个错误。
  可以打印$('#some-id').length，如果结果是0，说明没选到元素，赶紧修正你的选择器。

• 排查是否和其他库的$冲突
  如果页面里同时用了jQuery和Prototype、Zepto这类也用$作为全局变量的库，$会被其他库覆盖，导致你以为拿到的是jQuery对象，其实是其他库的对象，自然没有val()方法。
  这种情况可以用jQuery.noConflict()释放$的控制权，之后用jQuery代替$来调用方法，比如jQuery('#some-id').val()。

关于是否需要创建新函数：一般不需要，这个错误的根源是调用对象的类型不对，先把上面的排查步骤走完，解决对象的问题，基本就能搞定报错。如果之后你确实需要封装自定义的取值逻辑，再考虑写新函数也不迟。

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