正文

从零开始，学会用这5大Web表单开发框架轻松搭建网页表单

/0 浏览量
0331

在构建交互式网页时，表单是不可或缺的一部分。它允许用户与网站进行互动，提交数据，如注册信息、订单详情等。为了简化表单的开发过程，许多开发者选择使用Web表单开发框架。以下将介绍五个流行的Web表单开发框架，并指导你如何从零开始使用它们来搭建网页表单。

1. Bootstrap

简介：Bootstrap 是一个流行的前端框架，它提供了大量的预构建组件，包括表单。它易于上手，且具有响应式设计，适用于移动端和桌面端。

如何使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap 表单示例</title>
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">邮箱地址</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱">
                <small id="emailHelp" class="form-text text-muted">我们不会分享您的邮箱地址。</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</body>
</html>

2. jQuery Validation

简介：jQuery Validation 是一个轻量级的表单验证插件，可以轻松集成到任何基于jQuery的表单中。

如何使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Validation 示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
</head>
<body>
    <form id="myForm">
        <label for="email">邮箱地址:</label>
        <input type="email" id="email" name="email">
        <button type="submit">提交</button>
    </form>
    <script>
        $(document).ready(function() {
            $("#myForm").validate({
                rules: {
                    email: "required"
                },
                messages: {
                    email: "请输入您的邮箱地址"
                }
            });
        });
    </script>
</body>
</html>

3. React Hook Form

简介：React Hook Form 是一个基于React Hooks的表单管理库，适用于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)}>
            <label>Email:</label>
            <input {...register("email", { required: true })} />
            {errors.email && <span>This field is required</span>}
            <button type="submit">Submit</button>
        </form>
    );
};

export default MyForm;

4. Vue.js Formulate

简介：Vue.js Formulate 是一个基于Vue.js的表单库，它提供了许多内置的表单控件和验证器。

如何使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js Formulate 示例</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/formulate/dist/formulate.min.js"></script>
</head>
<body>
    <div id="app">
        <formulate-form @submit="onSubmit">
            <formulate-input type="email" label="邮箱地址" validation="required|email" />
            <button type="submit">提交</button>
        </formulate-form>
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                onSubmit(values) {
                    console.log(values);
                }
            }
        });
    </script>
</body>
</html>

5. Angular Reactive Forms

简介：Angular Reactive Forms 是Angular框架的一部分，它提供了强大的表单构建工具，包括双向数据绑定和复杂的验证逻辑。

如何使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Reactive Forms 示例</title>
    <script src="https://unpkg.com/@angular/core@11.2.2/fesm5/core.js"></script>
    <script src="https://unpkg.com/@angular/forms@11.2.2/fesm5/forms.js"></script>
</head>
<body>
    <div app-root>
        <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
            <input formControlName="email" type="email">
            <div *ngIf="myForm.get('email').hasError('required')">
                邮箱地址是必填的。
            </div>
            <button type="submit" [disabled]="!myForm.valid">提交</button>
        </form>
    </div>
    <script>
        const app = angular.module('myApp', ['ngForms']);
        app.controller('AppController', function() {
            this.myForm = new angular.form.Form({
                'email': new angular.form FormControl('')
            });
            this.onSubmit = function() {
                console.log(this.myForm.value);
            };
        });
    </script>
</body>
</html>

通过以上五个框架，你可以轻松地搭建出各种类型的网页表单。每个框架都有其独特的特点和优势，你可以根据自己的需求和技术栈选择合适的框架。希望这些信息能帮助你快速上手，开始构建你的第一个表单！

-- 展开阅读全文 --