正文

新手必看：盘点5款实用高效Web表单开发框架

/0 浏览量
0402

在Web开发领域，表单是用户与网站交互的重要途径。一个设计良好、易于使用的表单可以提高用户体验，降低用户流失率。随着技术的发展，越来越多的Web表单开发框架应运而生。本文将为你盘点5款实用高效的Web表单开发框架，帮助你更好地进行Web表单开发。

1. Bootstrap

Bootstrap 是一个前端框架，它包含了丰富的 CSS 和 JavaScript 组件，可以帮助开发者快速搭建响应式布局的网页。Bootstrap 提供了一套表单样式和组件，可以轻松实现各种类型的表单。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 表单示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="name">姓名：</label>
                <input type="text" class="form-control" id="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

2. jQuery Validation Plugin

jQuery Validation Plugin 是一个基于 jQuery 的表单验证插件，它可以方便地实现各种表单验证功能。该插件支持丰富的验证类型，如必填、邮箱、手机号、数字等。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery Validation Plugin 表单示例</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</head>
<body>
    <form id="myForm">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">提交</button>
    </form>
    <script>
        $(function() {
            $('#myForm').validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 2
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    name: {
                        required: "请输入姓名",
                        minlength: "姓名长度不能少于2个字符"
                    },
                    email: {
                        required: "请输入邮箱",
                        email: "邮箱格式不正确"
                    }
                }
            });
        });
    </script>
</body>
</html>

3. Semantic UI

Semantic UI 是一个基于 Less 的前端框架，它提供了丰富的组件和样式，使得开发者可以快速构建美观、易用的界面。Semantic UI 的表单组件具有很好的交互体验，可以帮助开发者轻松实现各种表单。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic UI 表单示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
    <div class="ui form">
        <div class="field">
            <label for="name">姓名</label>
            <input type="text" id="name" name="name">
        </div>
        <div class="field">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email">
        </div>
        <button class="ui button">提交</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>

4. Formik

Formik 是一个 React 表单管理库，它可以帮助开发者轻松实现表单状态管理、验证和提交等功能。Formik 具有良好的可扩展性，可以与 React 的其他库和组件配合使用。

代码示例

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

const SignupSchema = Yup.object().shape({
    name: Yup.string()
        .required('请输入姓名')
        .min(2, '姓名长度不能少于2个字符'),
    email: Yup.string()
        .email('邮箱格式不正确')
        .required('请输入邮箱'),
});

const MyForm = () => (
    <Formik
        initialValues={{ name: '', email: '' }}
        validationSchema={SignupSchema}
        onSubmit={(values, { setSubmitting }) => {
            console.log(values);
            setSubmitting(false);
        }}
    >
        {({ isSubmitting }) => (
            <Form>
                <Field type="text" name="name" placeholder="请输入姓名" />
                <Field type="email" name="email" placeholder="请输入邮箱" />
                <button type="submit" disabled={isSubmitting}>
                    提交
                </button>
            </Form>
        )}
    </Formik>
);

export default MyForm;

5. React Hook Form

React Hook Form 是一个基于 React Hooks 的表单库，它提供了丰富的功能和良好的性能。React Hook Form 支持表单验证、状态管理、提交等功能，并且易于与其他 React 组件和库配合使用。

代码示例

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

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

    const onSubmit = data => {
        console.log(data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input type="text" name="name" ref={register({ required: true, minLength: 2 })} />
            {errors.name && <p>请输入姓名</p>}
            <input type="email" name="email" ref={register({ required: true })} />
            {errors.email && <p>请输入邮箱</p>}
            <button type="submit">提交</button>
        </form>
    );
};

export default MyForm;

通过以上5款Web表单开发框架，相信你可以在开发过程中更加得心应手。希望这些框架能够帮助你提升开发效率，打造出更好的用户体验。

-- 展开阅读全文 --