javascript - 导入 jQuery 验证

Question

我想将“jquery-validation”导入 ES6 类

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

但是当我在同一个文件中的任何地方做

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

我得到错误

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

Answer 1

从您的代码示例的外观来看，您没有正确导入它。适用于我的以下导入（使用 Webpack 捆绑）：

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

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