正文

揭秘：轻松打造完美表单，这些前端工具网站太实用了！

/0 浏览量
1027

在互联网时代，表单已经成为网站与用户互动的重要桥梁。一个设计合理、用户体验良好的表单，不仅能够收集到准确的数据，还能提升用户对网站的满意度。今天，就让我们一起来揭秘那些能帮助前端开发者轻松打造完美表单的实用工具网站。

1. BootstrapValidator

BootstrapValidator 是一个基于 Bootstrap 的前端表单验证插件。它提供了一套丰富的验证规则，如必填、邮箱、数字、长度限制等。这款插件简单易用，只需在 HTML 表单元素中添加相应的类和验证规则即可。

代码示例：

<form class="form-horizontal" id="registerForm">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="username">用户名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="email">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱" required>
    </div>
  </div>
  <button type="submit" class="btn btn-default">注册</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/bootstrap-validator/dist/js/bootstrapValidator.min.js"></script>
<script>
  $('#registerForm').bootstrapValidator({
    message: '这个值看起来不正确',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      username: {
        message: '用户名验证失败',
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          },
          stringLength: {
            min: 3,
            max: 30,
            message: '用户名长度必须在3到30之间'
          },
          different: {
            field: 'password',
            message: '用户名和密码不能相同'
          }
        }
      },
      email: {
        message: '邮箱验证失败',
        validators: {
          notEmpty: {
            message: '邮箱不能为空'
          },
          emailAddress: {
            message: '邮箱格式不正确'
          }
        }
      },
      password: {
        message: '密码验证失败',
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          different: {
            field: 'username',
            message: '密码和用户名不能相同'
          }
        }
      }
    }
  });
</script>

2. jQuery Validate

jQuery Validate 是一个轻量级的表单验证插件，支持各种验证规则。它易于使用，与 jQuery 集成良好，可以轻松地与各种 UI 框架结合。

代码示例：

<form id="registerForm">
  <input type="text" id="username" name="username" placeholder="请输入用户名" required>
  <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
  <input type="password" id="password" name="password" placeholder="请输入密码" required>
  <button type="submit">注册</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validate/dist/jquery.validate.min.js"></script>
<script>
  $(document).ready(function() {
    $('#registerForm').validate({
      rules: {
        username: {
          required: true,
          minlength: 3,
          maxlength: 30
        },
        email: {
          required: true,
          email: true
        },
        password: {
          required: true,
          minlength: 6,
          maxlength: 20
        }
      },
      messages: {
        username: {
          required: "请输入用户名",
          minlength: "用户名长度必须在3到30之间",
          maxlength: "用户名长度必须在3到30之间"
        },
        email: {
          required: "请输入邮箱",
          email: "邮箱格式不正确"
        },
        password: {
          required: "请输入密码",
          minlength: "密码长度必须在6到20之间",
          maxlength: "密码长度必须在6到20之间"
        }
      }
    });
  });
</script>

3. Parsley.js

Parsley.js 是一个强大的表单验证库，它支持多种验证规则，如必填、邮箱、数字、长度限制、正则表达式等。Parsley.js 与 Bootstrap 集成良好，可以轻松实现表单验证功能。

代码示例：

<form id="registerForm" data-parsley-validate>
  <input type="text" id="username" name="username" placeholder="请输入用户名" required data-parsley-minlength="3" data-parsley-maxlength="30">
  <input type="email" id="email" name="email" placeholder="请输入邮箱" required data-parsley-type="email">
  <input type="password" id="password" name="password" placeholder="请输入密码" required data-parsley-minlength="6" data-parsley-maxlength="20">
  <button type="submit">注册</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/parsleyjs/dist/parsley.min.js"></script>
<script>
  $(document).ready(function() {
    $('#registerForm').parsley().on('form:validate', function(formInstance) {
      if (formInstance.isValid()) {
        // 表单验证成功，可以执行后续操作
      } else {
        // 表单验证失败，可以阻止表单提交
        formInstance.submitEvent.preventDefault();
      }
    });
  });
</script>

4. Formik

Formik 是一个 React 表单库，它可以帮助你快速创建复杂的表单。Formik 提供了丰富的功能，如表单初始化、表单验证、表单提交等。

代码示例：

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

const registerSchema = Yup.object().shape({
  username: Yup.string()
    .required('请输入用户名')
    .min(3, '用户名长度必须在3到30之间')
    .max(30, '用户名长度必须在3到30之间'),
  email: Yup.string()
    .required('请输入邮箱')
    .email('邮箱格式不正确'),
  password: Yup.string()
    .required('请输入密码')
    .min(6, '密码长度必须在6到20之间')
    .max(20, '密码长度必须在6到20之间')
});

function RegisterForm() {
  return (
    <Formik
      initialValues={{ username: '', email: '', password: '' }}
      validationSchema={registerSchema}
      onSubmit={(values, { setSubmitting }) => {
        // 表单提交逻辑
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="username" placeholder="请输入用户名" />
          <Field type="email" name="email" placeholder="请输入邮箱" />
          <Field type="password" name="password" placeholder="请输入密码" />
          <button type="submit" disabled={isSubmitting}>
            注册
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default RegisterForm;

总结

以上介绍了几个实用的前端表单工具网站，它们可以帮助你轻松打造出功能丰富、用户体验良好的表单。在实际开发中，可以根据项目需求和团队习惯选择合适的工具，让表单开发变得更加高效。

-- 展开阅读全文 --