为何无法调用jQuery对象内的JS函数？如何声明jQuery自定义函数？

你遇到的这个问题很常见——你的valid()函数被包裹在了jQuery的DOM就绪回调（$(function(){...})）里面，这使得它变成了局部函数，只能在这个回调内部被调用，外部（比如控制台直接执行console.log(valid())）当然找不到它啦。

下面给你两种可行的解决办法：

方法一：把函数定义在全局作用域 #

直接把valid()放在DOM就绪回调外面，这样它就属于全局作用域，任何地方都能访问到：

// 全局作用域下定义函数
function valid(){
  // 简化条件判断写法，!取反比==false更直观
  if($('input[type=text]').val() == "" && 
     $('input[type=number]').val() == "" && 
     $('input[type=email]').val() == "" && 
     !$('input[type=checkbox]').is(':checked')){
    alert('Please fill every details');
    return false;
  }
  // 补充默认返回值，避免无返回时的undefined
  return true;
}

// DOM就绪后再绑定函数到表单事件
$(function(){
  // 示例：绑定表单提交时的校验
  $('form').on('submit', function(){
    return valid();
  });
});

方法二：挂载到window对象（不污染全局作用域的折中方案） #

如果不想直接在全局定义太多函数，可以把valid()挂载到window对象上，这样外部依然能访问，同时逻辑还留在DOM就绪回调里：

$(function(){
  // 把函数赋值给window.valid，使其成为全局可访问的函数
  window.valid = function(){
    if($('input[type=text]').val() == "" && 
       $('input[type=number]').val() == "" && 
       $('input[type=email]').val() == "" && 
       !$('input[type=checkbox]').is(':checked')){
      alert('Please fill every details');
      return false;
    }
    return true;
  };
});

几个额外小提示 #

• 注意：如果你的表单里有多个同类型输入框（比如多个文本框），$('input[type=text]').val()只会获取第一个输入框的值，这可能不符合你“校验所有字段”的需求，需要调整逻辑遍历所有输入框哦。
• 函数一定要有明确的返回值，否则当不满足弹窗条件时，函数会默认返回undefined，可能导致后续逻辑出错。

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