正文

轻松搭建表单，这些Web表单开发框架必看！

/0 浏览量
0508

在现代的Web开发中，表单是用户与网站交互的关键部分。一个设计良好的表单不仅可以提升用户体验，还能有效收集用户数据。为了帮助开发者轻松搭建高质量的表单，下面介绍几款受欢迎的Web表单开发框架，让你在设计表单时游刃有余。

1. Bootstrap Form

Bootstrap是一款流行的前端框架，其内置的表单组件可以快速创建样式一致且响应式的表单。Bootstrap Form利用了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://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Form Example</title>
</head>
<body>
    <div class="container">
        <form>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. jQuery Validation

jQuery Validation是一个强大的表单验证插件，它可以轻松地在表单中实现各种验证规则，如必填、邮箱格式、密码强度等。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
    <title>jQuery Validation Example</title>
</head>
<body>
    <form id="registrationForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Register</button>
    </form>
    <script>
        $(document).ready(function() {
            $("#registrationForm").validate();
        });
    </script>
</body>
</html>

3. React Formik

Formik是一个针对React的表单管理库，它通过使用表单组件和表单处理逻辑的解耦，简化了表单的创建和使用。

代码示例：

import React from 'react';
import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validate: values => {
      const errors = {};
      if (!values.email) {
        errors.email = 'Required';
      } else if (!/^[A.z0-9.+_-]+@[A.z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address';
      }
      if (!values.password) {
        errors.password = 'Required';
      }
      return errors;
    },
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {formik.errors.email && formik.touched.email && (
        <div className="error">{formik.errors.email}</div>
      )}
      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />
      {formik.errors.password && formik.touched.password && (
        <div className="error">{formik.errors.password}</div>
      )}
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

4. Vue.js VeeValidate

VeeValidate是Vue.js生态系统中一款功能强大的表单验证库，它支持多种验证规则，并与Vue.js的响应式系统完美结合。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/vee-validate/dist/vee-validate.js"></script>
    <title>Vue.js VeeValidate Example</title>
</head>
<body>
    <div id="app">
        <form @submit.prevent="submitForm">
            <input v-model="email" v-validate="'required|email'" name="email" type="email">
            <span v-if="errors.has('email')">{{ errors.first('email') }}</span>
            <button type="submit">Submit</button>
        </form>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    email: '',
                };
            },
            methods: {
                submitForm() {
                    this.$validator.validateAll().then((result) => {
                        if (result) {
                            alert('Form submitted!');
                        }
                    });
                },
            },
        });
    </script>
</body>
</html>

以上这些框架各有特点，根据你的项目需求和偏好，选择适合你的框架，让表单开发变得轻松愉快！

-- 展开阅读全文 --