导入jQuery验证库

Question

我想将 'jquery-validation' 导入到一个 ES6 类中。

import $ from 'jquery'
import 'jquery-validation'

但是当我在同一文件中的任何地方使用时

$(...).validate({...})

我遇到了一个错误

Uncaught TypeError: $(...).validate is not a function

- philip_nunoo

---

你是用什么方法在浏览器上使你的 import 语句可用？我有一个使用 babelify 转换的 gulp browserify 任务，它运行得非常好（我有你上面写的相同的导入语句）。 请参考以下链接：https://github.com/babel/babelify，http://egorsmirnov.me/2015/05/25/browserify-babelify-and-es6.html。 - Gabriel Ferraz

Answer 1

从你的代码示例来看，你没有正确地进行导入。对我而言，以下是使用Webpack打包的正确导入方式：

import $ from 'jquery'
import validate from 'jquery-validation'

- Brad Adams

---

虽然这在模块中可以工作，但如何在我的HTML页面上使用它？看起来好像不可用。 - Eugen Konkov

Answer 2

import { useRef } from "react";
import $ from "jquery";
import validate from "jquery-validation";

import "./styles.css";

export default function App() {
  const ref = useRef();

  function handleFormSubmit(e) {
    e.preventDefault();

    $(ref.current).validate({
      rules: {
        name: { required: true },
        address: { required: true }
      },
      messages: {
        name: { required: "Name field is required" },
        address: { required: "Address field is required" }
      }
    });
  }

  return (
    <form ref={ref} onSubmit={handleFormSubmit} noValidate="novalidate">
      <input name="name" id="name" type="text" placeholder="Name" />
      <textarea
        name="address"
        id="address"
        cols="4"
        rows="4"
        placeholder="Address"
      ></textarea>
      <button type="submit">Submit</button>
    </form>
  );
}

并链接https://codesandbox.io/s/gallant-dirac-7h8t6?file=/src/App.js:0-873

- Дмитрий Переверза

---

欢迎来到StackOverflow。虽然这段代码可能解决了问题，但是加上解释为什么以及如何解决问题会真正帮助提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释并指出适用的限制和假设。请参阅此处→如何撰写好的答案？ - Federico Baù