正文

学会这5款热门Web表单开发框架，轻松打造高效表单！

/0 浏览量
0903

在Web开发中，表单是用户与网站交互的重要途径。一个设计良好、功能完善的表单能够提高用户体验，降低用户流失率。而掌握一款优秀的Web表单开发框架，将大大提升你的开发效率。下面，我将为大家介绍5款热门的Web表单开发框架，帮助你轻松打造高效表单。

1. Bootstrap

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具，可以帮助开发者快速搭建响应式网页。Bootstrap 的表单组件功能强大，支持各种表单控件，如输入框、选择框、文本域等。以下是一个简单的Bootstrap表单示例：

<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>

2. jQuery EasyUI

jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的 UI 组件和交互功能，可以轻松构建各种类型的表单。以下是一个使用 jQuery EasyUI 创建的简单表单示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
  <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
  <form id="form1">
    <table>
      <tr>
        <td>用户名：</td>
        <td><input type="text" name="username" class="easyui-validatebox" data-options="required:true"></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" name="password" class="easyui-validatebox" data-options="required:true"></td>
      </tr>
      <tr>
        <td>邮箱：</td>
        <td><input type="text" name="email" class="easyui-validatebox" data-options="required:true,validType:'email'"></td>
      </tr>
      <tr>
        <td></td>
        <td><a href="#" class="easyui-linkbutton" onclick="submitForm()">提交</a></td>
      </tr>
    </table>
  </form>
  <script>
    function submitForm(){
      $('#form1').form('submit', {
        url:'submitForm.php',
        onSubmit: function(){
          return $(this).form('validate');
        },
        success: function(data){
          $.messager.show({
            title:'提示',
            msg:data,
            showType:'show'
          });
        }
      });
    }
  </script>
</body>
</html>

3. Materialize CSS

Materialize CSS 是一个响应式的前端框架，它基于 Google 的 Material Design 设计语言。Materialize CSS 提供了丰富的表单组件，可以帮助开发者快速创建美观、现代化的表单。以下是一个使用 Materialize CSS 创建的简单表单示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
  <div class="container">
    <form>
      <div class="row">
        <div class="input-field col s6">
          <input id="username" type="text" class="validate">
          <label for="username">用户名</label>
        </div>
        <div class="input-field col s6">
          <input id="password" type="password" class="validate">
          <label for="password">密码</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">邮箱地址</label>
        </div>
      </div>
      <button class="btn waves-effect waves-light" type="submit" name="action">提交
        <i class="material-icons right">send</i>
      </button>
    </form>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

4. React Formik

React 是一个流行的前端框架，它可以帮助开发者构建高效的 UI。Formik 是一个基于 React 的表单处理库，它简化了表单状态的维护和验证。以下是一个使用 React 和 Formik 创建的简单表单示例：

import React from 'react';
import { Formik, Field, Form } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ username: '', password: '', email: '' }}
      validate={values => {
        const errors = {};
        if (!values.username) {
          errors.username = '用户名不能为空';
        }
        if (!values.password) {
          errors.password = '密码不能为空';
        }
        if (!values.email) {
          errors.email = '邮箱地址不能为空';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div>
            <label htmlFor="username">用户名</label>
            <Field type="text" name="username" />
            <div>{touched.username && errors.username && <div>{errors.username}</div>}</div>
          </div>
          <div>
            <label htmlFor="password">密码</label>
            <Field type="password" name="password" />
            <div>{touched.password && errors.password && <div>{errors.password}</div>}</div>
          </div>
          <div>
            <label htmlFor="email">邮箱地址</label>
            <Field type="email" name="email" />
            <div>{touched.email && errors.email && <div>{errors.email}</div>}</div>
          </div>
          <button type="submit" disabled={isSubmitting}>
            提交
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;

5. Vue.js VeeValidate

Vue.js 是一个渐进式JavaScript框架，它可以帮助开发者构建用户界面。VeeValidate 是一个基于 Vue.js 的表单验证库，它支持多种验证规则和自定义验证器。以下是一个使用 Vue.js 和 VeeValidate 创建的简单表单示例：

<!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <div id="app">
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">用户名</label>
        <input v-model="username" @blur="validateField('username')" />
        <span v-if="errors.username">{{ errors.username }}</span>
      </div>
      <div>
        <label for="password">密码</label>
        <input v-model="password" @blur="validateField('password')" />
        <span v-if="errors.password">{{ errors.password }}</span>
      </div>
      <div>
        <label for="email">邮箱地址</label>
        <input v-model="email" @blur="validateField('email')" />
        <span v-if="errors.email">{{ errors.email }}</span>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          username: '',
          password: '',
          email: '',
          errors: {}
        };
      },
      methods: {
        validateField(field) {
          if (field === 'username') {
            if (!this.username) {
              this.errors.username = '用户名不能为空';
            } else {
              this.errors.username = '';
            }
          }
          if (field === 'password') {
            if (!this.password) {
              this.errors.password = '密码不能为空';
            } else {
              this.errors.password = '';
            }
          }
          if (field === 'email') {
            if (!this.email) {
              this.errors.email = '邮箱地址不能为空';
            } else {
              this.errors.email = '';
            }
          }
        },
        submitForm() {
          if (!this.errors.username && !this.errors.password && !this.errors.email) {
            alert('表单提交成功！');
          }
        }
      }
    });
  </script>
</body>
</html>

通过以上5款热门Web表单开发框架，你可以轻松打造出高效、美观的表单。希望这些信息对你有所帮助！

-- 展开阅读全文 --