正文

从零开始，学会用这5个热门Web表单开发框架轻松搭建高效表单

/0 浏览量
0405

在数字化时代，表单是网站与用户互动的重要工具。一个高效、用户友好的表单不仅能提升用户体验，还能为网站带来更多数据。今天，我们就来聊聊如何从零开始，使用5个热门的Web表单开发框架，轻松搭建高效表单。

1. Bootstrap

Bootstrap 是一个流行的前端框架，它可以帮助开发者快速搭建响应式布局的网站。以下是使用 Bootstrap 搭建表单的基本步骤：

  • HTML 结构：使用 <form> 标签创建表单，并添加相应的输入字段。
  • CSS 样式：利用 Bootstrap 的栅格系统对表单进行布局，使用预定义的类对输入字段进行美化。
  • JavaScript 功能：使用 Bootstrap 的 JavaScript 插件（如 Validation）增强表单功能。
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
  <form>
    <div class="mb-3">
      <label for="inputEmail" class="form-label">邮箱</label>
      <input type="email" class="form-control" id="inputEmail" required>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</body>
</html>

2. jQuery Validation

jQuery Validation 是一个轻量级的 jQuery 插件，用于在客户端验证表单数据。以下是使用 jQuery Validation 搭建表单的基本步骤：

  • HTML 结构：创建表单，并添加相应的输入字段。
  • JavaScript 代码：引入 jQuery 和 jQuery Validation 库，并编写验证规则。
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
</head>
<body>
  <form id="myForm">
    <div class="mb-3">
      <label for="inputEmail" class="form-label">邮箱</label>
      <input type="email" class="form-control" id="inputEmail" required>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>

  <script>
    $("#myForm").validate({
      rules: {
        email: {
          required: true,
          email: true
        }
      }
    });
  </script>
</body>
</html>

3. React Formik

React Formik 是一个 React 表单管理库，可以帮助开发者轻松处理表单状态和验证。以下是使用 React Formik 搭建表单的基本步骤：

  • React 组件：创建一个 React 组件，并使用 useForm 钩子初始化表单状态。
  • 表单渲染：使用 <Formik> 和 <Field> 组件渲染表单字段。
  • 表单提交：处理表单提交事件，并将数据提交到服务器。
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email('请输入有效的邮箱')
    .required('邮箱是必填项'),
});

const MyForm = () => (
  <Formik
    initialValues={{ email: '' }}
    validationSchema={validationSchema}
    onSubmit={(values, { setSubmitting }) => {
      // 处理表单提交
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <div className="mb-3">
          <label htmlFor="email" className="form-label">邮箱</label>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
        </div>
        <button type="submit" disabled={isSubmitting} className="btn btn-primary">
          提交
        </button>
      </Form>
    )}
  </Formik>
);

export default MyForm;

4. Angular Reactive Forms

Angular Reactive Forms 是一个基于 Reactivity 模式的表单管理库，它可以帮助开发者轻松构建复杂表单。以下是使用 Angular Reactive Forms 搭建表单的基本步骤：

  • HTML 结构：创建表单，并使用 ngModel 指令将输入字段绑定到表单模型。
  • 表单模型：创建一个表单模型类，用于存储表单数据。
  • 表单验证：使用 asyncValidator 和 asyncValidators 方法添加异步验证规则。
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@angular/core@12.2.13/fesm2020/core.js"></script>
  <script src="https://unpkg.com/@angular/forms@12.2.13/fesm2020/forms.js"></script>
</head>
<body>
  <form [formGroup]="myForm">
    <div formGroupName="emailGroup">
      <input type="email" formControlName="email">
      <div *ngIf="emailGroup.get('email').hasError('required')">邮箱是必填项</div>
      <div *ngIf="emailGroup.get('email').hasError('email')">请输入有效的邮箱</div>
    </div>
    <button type="submit" [disabled]="!myForm.valid">提交</button>
  </form>

  <script>
    angular
      .module('myApp', ['ngModel', 'ngForms'])
      .controller('MyController', function($scope) {
        $scope.myForm = {
          emailGroup: {
            email: ''
          }
        };

        $scope.emailGroup = $scope.myForm.emailGroup;
        $scope.emailGroup.$validators.email = function(control) {
          if (!control.value) {
            return true;
          }
          var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          return emailRegex.test(control.value);
        };
      });
  </script>
</body>
</html>

5. Vue.js VeeValidate

Vue.js VeeValidate 是一个 Vue.js 表单验证库，它可以帮助开发者轻松处理表单验证。以下是使用 Vue.js VeeValidate 搭建表单的基本步骤：

  • HTML 结构：创建表单，并使用 v-model 指令将输入字段绑定到数据。
  • 表单验证：使用 v-validate 指令添加验证规则。
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@2.4.3/dist/vee-validate.min.js"></script>
</head>
<body>
  <div id="app">
    <form @submit.prevent="submitForm">
      <div>
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="email" v-validate="'required|email'" name="email">
        <span v-if="errors.has('email')">{{ errors.first('email') }}</span>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          email: ''
        };
      },
      methods: {
        submitForm() {
          this.$validator.validateAll().then((result) => {
            if (result) {
              // 处理表单提交
            }
          });
        }
      }
    });
  </script>
</body>
</html>

通过以上5个热门的Web表单开发框架，你可以轻松搭建出高效、用户友好的表单。希望本文对你有所帮助！

-- 展开阅读全文 --