化繁为简：让表单批量校验不再困难

前端

2022-12-15 06:02:55

级联校验：简化复杂表单校验的秘诀

在当今充满动态交互和复杂界面的网络世界中，处理多个表单的校验已成为网页开发者面临的重大挑战。传统的校验方法既繁琐又容易出错，而级联校验技术的出现为我们提供了化繁为简的有效解决方案。

级联校验的优势

统一结构： 级联校验将多个表单的校验逻辑组织成一个统一的结构，简化了代码并提高了可维护性。只需对校验逻辑进行一次修改，即可对所有相关表单进行校验。

自动化过程： 当用户提交表单时，级联校验系统会自动对所有表单进行校验，根据校验结果显示错误信息。这消除了手动校验的需要，提高了效率。

易于扩展： 级联校验方案具有良好的可扩展性，随着表单数量或结构的变化，可以轻松扩展校验逻辑。

实战案例

Vue.js

import { ref, reactive } from 'vue'

const formState = reactive({
  firstName: '',
  lastName: '',
  email: '',
})

const errors = ref({})

const validateForm = () => {
  errors.value = {}

  if (!formState.firstName) {
    errors.value.firstName = 'Please provide a first name'
  }

  if (!formState.lastName) {
    errors.value.lastName = 'Please provide a last name'
  }

  if (!formState.email || !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(formState.email)) {
    errors.value.email = 'Please provide a valid email'
  }

  return Object.keys(errors.value).length === 0
}

React.js

import { useState } from 'react'

const Form = () => {
  const [formState, setFormState] = useState({
    firstName: '',
    lastName: '',
    email: '',
  })

  const [errors, setErrors] = useState({})

  const validateForm = (e) => {
    e.preventDefault()

    setErrors({})

    if (!formState.firstName) {
      setErrors({ ...errors, firstName: 'Please provide a first name' })
    }

    if (!formState.lastName) {
      setErrors({ ...errors, lastName: 'Please provide a last name' })
    }

    if (!formState.email || !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(formState.email)) {
      setErrors({ ...errors, email: 'Please provide a valid email' })
    }
  }

  return (
    <form onSubmit={validateForm}>
      {/* ... */}
    </form>
  )
}

Angular.js

app.controller('FormCtrl', function($scope) {
  $scope.formState = {
    firstName: '',
    lastName: '',
    email: '',
  }

  $scope.errors = {}

  $scope.validateForm = function() {
    $scope.errors = {}

    if (!$scope.formState.firstName) {
      $scope.errors.firstName = 'Please provide a first name'
    }

    if (!$scope.formState.lastName) {
      $scope.errors.lastName = 'Please provide a last name'
    }

    if (!$scope.formState.email || !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($scope.formState.email)) {
      $scope.errors.email = 'Please provide a valid email'
    }
  }
})