Panduan pemprosesan borang bertindak balas: Cara mengendalikan pengesahan borang bahagian hadapan yang kompleks

Panduan Pemprosesan Borang React: Cara mengendalikan pengesahan borang bahagian hadapan yang kompleks, contoh kod khusus diperlukan

Pengenalan:
Dengan kerumitan aplikasi bahagian hadapan, borang telah beransur-ansur menjadi bahagian yang amat diperlukan dalam pembangunan harian kami. Walau bagaimanapun, kami sering menghadapi beberapa cabaran apabila borang memerlukan pengesahan yang kompleks. Artikel ini akan memperkenalkan beberapa garis panduan untuk mengendalikan pengesahan borang hadapan yang kompleks dalam React dan memberikan contoh kod khusus.

1. Kepentingan pengesahan borang
Pengesahan borang adalah langkah utama untuk memastikan kesahihan dan integriti data input pengguna. Dalam pembangunan bahagian hadapan, pengesahan borang secara berkesan boleh mengurangkan ralat dan lebihan dalam pemprosesan data bahagian belakang. Pada masa yang sama, pengesahan borang juga boleh memberikan pengalaman pengguna yang lebih baik Contohnya, pengesahan masa nyata boleh memberi maklum balas segera kepada pengguna dan meningkatkan kemesraan operasi pengguna.

2. Pengesahan borang asas
Dalam React, kita boleh menggunakan Komponen Terkawal untuk melaksanakan pengesahan borang asas. Komponen Terkawal ialah mod untuk mengawal nilai borang oleh React Dengan mengikat nilai input borang kepada keadaan komponen, keadaan ditukar dalam masa nyata dan kesahihannya disahkan.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan Komponen Terkawal untuk melaksanakan pengesahan borang:

import React, { Component } from 'react';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      confirmPassword: '',
      errors: {
        username: '',
        password: '',
        confirmPassword: ''
      }
    };
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    });
  };

  validateForm = () => {
    const { username, password, confirmPassword } = this.state;
    let errors = {};

    if (!username) {
      errors.username = '用户名不能为空';
    }

    if (!password) {
      errors.password = '密码不能为空';
    } else if (password.length < 6) {
      errors.password = '密码长度必须大于6位';
    }

    if (confirmPassword !== password) {
      errors.confirmPassword = '两次密码输入不一致';
    }

    this.setState({ errors });

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

  handleSubmit = (event) => {
    event.preventDefault();
    if (this.validateForm()) {
      // 表单验证通过，提交表单
      console.log('提交表单');
    }
  };

  render() {
    const { username, password, confirmPassword, errors } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>用户名：</label>
          <input
            type="text"
            name="username"
            value={username}
            onChange={this.handleInputChange}
          />
          {errors.username && <span>{errors.username}</span>}
        </div>

        <div>
          <label>密码：</label>
          <input
            type="password"
            name="password"
            value={password}
            onChange={this.handleInputChange}
          />
          {errors.password && <span>{errors.password}</span>}
        </div>

        <div>
          <label>确认密码：</label>
          <input
            type="password"
            name="confirmPassword"
            value={confirmPassword}
            onChange={this.handleInputChange}
          />
          {errors.confirmPassword && <span>{errors.confirmPassword}</span>}
        </div>

        <button type="submit">提交</button>
      </form>
    );
  }
}

export default Form;

Dalam contoh di atas, kami menentukan komponen Borang dan menggunakan keadaan untuk menyimpan nilai dan maklumat ralat setiap item dalam bentuk. Kaedah handleInputChange digunakan untuk mengendalikan kemas kini keadaan apabila input borang berubah, dan kaedah validateForm digunakan untuk mengesahkan borang dan menetapkan maklumat ralat apabila pengesahan gagal. Akhir sekali, kaedah handleSubmit digunakan untuk menyerahkan borang, dengan syarat pengesahan borang lulus.

3. Memproses pengesahan borang yang kompleks
Apabila borang mempunyai lebih banyak item input dan peraturan pengesahan lebih kompleks, kita boleh menggunakan perpustakaan luaran seperti Formik dan Yup untuk memprosesnya. Perpustakaan ini boleh menyediakan keupayaan pengesahan borang yang berkuasa dan memudahkan proses pembangunan kami.

Formik ialah perpustakaan React untuk pemprosesan borang Ia menyediakan fungsi seperti pengurusan negeri, pemprosesan acara dan pengesahan nilai borang. Yup ialah perpustakaan untuk membina corak pengesahan JavaScript, yang menyediakan peraturan pengesahan yang berkuasa.

Berikut ialah contoh penggunaan Formik dan Yup untuk mengendalikan pengesahan borang yang kompleks:

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const Form = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: ''
    },
    validationSchema: Yup.object({
      email: Yup.string().email('无效的邮箱地址').required('邮箱不能为空'),
      password: Yup.string()
        .min(6, '密码长度必须大于6位')
        .required('密码不能为空')
    }),
    onSubmit: (values) => {
      console.log(values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="email">邮箱：</label>
        <input
          id="email"
          type="email"
          {...formik.getFieldProps('email')}
        />
        {formik.touched.email && formik.errors.email && (
          <div>{formik.errors.email}</div>
        )}
      </div>

      <div>
        <label htmlFor="password">密码：</label>
        <input
          id="password"
          type="password"
          {...formik.getFieldProps('password')}
        />
        {formik.touched.password && formik.errors.password && (
          <div>{formik.errors.password}</div>
        )}
      </div>

      <button type="submit">提交</button>
    </form>
  );
};

export default Form;

Dalam contoh di atas, kami menggunakan cangkuk useFormik dalam formik untuk mencipta contoh borang dan menggabungkan nilai awal, peraturan pengesahan dan kaedah menyerahkan borang Fungsi panggil balik diserahkan untuk permulaan. Kemudian, kami akan menggunakan kaedah getFieldProps pada elemen borang yang perlu mengikat keadaan dan peristiwa, dan ia secara automatik akan mengendalikan keadaan dan peristiwa item borang yang sepadan. Akhir sekali, dengan menilai peristiwa sentuhan dan mesej ralat, ralat pengesahan boleh dipaparkan dalam masa nyata.

Kesimpulan:
Artikel ini membentangkan panduan untuk mengendalikan pengesahan borang bahagian hadapan yang kompleks dalam React dan menyediakan contoh kod khusus. Dengan menggunakan Komponen Terkawal dan perpustakaan lanjutan seperti Formik dan Yup, kami boleh melaksanakan pengesahan borang dengan lebih mudah dan cekap, serta memberikan pengalaman pengguna yang lebih baik. Saya harap artikel ini dapat membantu anda menangani pengesahan borang yang kompleks dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Panduan pemprosesan borang bertindak balas: Cara mengendalikan pengesahan borang bahagian hadapan yang kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!