正文

轻松搞定表单验证，盘点5款实用插件推荐

/0 浏览量
1030

在现代网页设计中，表单验证是一个不可或缺的功能，它可以帮助用户快速、准确地提交数据，同时也能提高用户体验。为了帮助大家轻松实现表单验证，以下将盘点5款实用的表单验证插件，让您的网站焕发活力。

1. jQuery Validate

jQuery Validate 是一款非常流行的表单验证插件，它基于 jQuery 开发，支持丰富的验证规则，如必填、邮箱、手机号、密码强度等。下面是一个简单的示例：

<form id="myForm">
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">提交</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
$(function() {
  $("#myForm").validate({
    rules: {
      email: {
        required: true,
        email: true
      }
    }
  });
});
</script>

2. Parsley.js

Parsley.js 是一款轻量级的表单验证插件，它具有易于使用的 API 和丰富的验证规则。下面是一个简单的示例：

<form id="myForm">
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" data-parsley-type="email" data-parsley-required="true">
  <button type="submit">提交</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/parsleyjs/2.9.2/parsley.min.js"></script>
<script>
$(function() {
  $("#myForm").parsley().validate();
});
</script>

3. Formik

Formik 是一个 React 表单库，它提供了一套完整的表单解决方案，包括验证、提交等功能。下面是一个简单的示例：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const emailSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
});

function MyForm() {
  return (
    <Formik
      initialValues={{ email: '' }}
      validationSchema={emailSchema}
      onSubmit={(values, { setSubmitting }) => {
        // 处理表单提交逻辑
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <label htmlFor="email">邮箱：</label>
          <Field type="email" id="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit" disabled={isSubmitting}>
            提交
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default MyForm;

4. Vuelidate

Vuelidate 是一个 Vue.js 表单验证库，它提供了简单、直观的 API，可以帮助你快速实现表单验证。下面是一个简单的示例：

<template>
  <div>
    <form @submit.prevent="submit">
      <label for="email">邮箱：</label>
      <input v-model="email" type="email" id="email" name="email" />
      <span v-if="!$v.email.required && $v.$invalid">邮箱必填</span>
      <span v-if="!$v.email.email && $v.$invalid">邮箱格式错误</span>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      email: ''
    };
  },
  validations: {
    email: { required, email }
  },
  methods: {
    submit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // 处理表单提交逻辑
      }
    }
  }
};
</script>

5. React Hook Form

React Hook Form 是一个基于 React Hook 的表单管理库，它具有简洁的 API 和强大的功能。下面是一个简单的示例：

import React from 'react';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const emailSchema = yup.object().shape({
  email: yup.string()
    .email('Invalid email')
    .required('Required'),
});

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => {
    // 处理表单提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">邮箱：</label>
      <input {...register("email", emailSchema.email)} />
      <p>{errors.email && <span>This field is required</span>}</p>
      <button type="submit">提交</button>
    </form>
  );
}

export default MyForm;

以上就是5款实用的表单验证插件推荐，希望对您有所帮助。在实际开发过程中，您可以根据项目需求和团队习惯选择合适的插件，让表单验证变得更加轻松。

-- 展开阅读全文 --