Solid.js 中的 JSX 表单处理与验证

Solid.js 中的表单基础

表单元素绑定

在 Solid.js 中处理表单，首先要了解如何将表单元素与组件的状态进行绑定。以文本输入框为例，我们可以使用 createSignal 创建一个信号来存储输入的值。

import { createSignal } from 'solid-js';

const MyForm = () => {
  const [inputValue, setInputValue] = createSignal('');

  return (
    <form>
      <input
        type="text"
        value={inputValue()}
        onInput={(e) => setInputValue(e.target.value)}
      />
      <p>输入的值是: {inputValue()}</p>
    </form>
  );
};

在上述代码中，createSignal 创建了一个名为 inputValue 的信号以及对应的 setInputValue 函数用于更新该信号的值。input 元素的 value 属性绑定到 inputValue()，而 onInput 事件则通过 setInputValue 来更新信号的值，从而实现双向数据绑定。

对于单选按钮和复选框，绑定方式稍有不同。以单选按钮为例：

import { createSignal } from 'solid-js';

const RadioForm = () => {
  const [selectedOption, setSelectedOption] = createSignal('option1');

  return (
    <form>
      <input
        type="radio"
        value="option1"
        checked={selectedOption() === 'option1'}
        onChange={() => setSelectedOption('option1')}
      /> Option 1
      <input
        type="radio"
        value="option2"
        checked={selectedOption() === 'option2'}
        onChange={() => setSelectedOption('option2')}
      /> Option 2
      <p>选中的选项是: {selectedOption()}</p>
    </form>
  );
};

这里 selectedOption 信号存储了当前选中的单选按钮的值。每个 input 元素的 checked 属性根据 selectedOption 的值来判断是否选中，而 onChange 事件则更新 selectedOption 的值。

表单提交

表单提交是表单处理的重要环节。在 Solid.js 中，我们可以通过监听表单的 submit 事件来处理提交逻辑。

import { createSignal } from 'solid-js';

const SubmitForm = () => {
  const [inputValue, setInputValue] = createSignal('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交的值:', inputValue());
    // 这里可以添加实际的提交逻辑，如发送数据到服务器
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue()}
        onInput={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">提交</button>
    </form>
  );
};

在 handleSubmit 函数中，我们首先调用 e.preventDefault() 来阻止表单的默认提交行为，避免页面刷新。然后可以在函数内部处理提交的数据，例如发送 AJAX 请求到服务器。

表单验证基础

简单的非空验证

表单验证是确保用户输入数据有效性的重要步骤。最常见的验证之一就是非空验证。我们可以在表单提交时进行非空验证。

import { createSignal } from 'solid-js';

const NonEmptyForm = () => {
  const [inputValue, setInputValue] = createSignal('');
  const [error, setError] = createSignal('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue() === '') {
      setError('输入不能为空');
    } else {
      setError('');
      console.log('提交的值:', inputValue());
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue()}
        onInput={(e) => setInputValue(e.target.value)}
      />
      {error() && <p style={{ color:'red' }}>{error()}</p>}
      <button type="submit">提交</button>
    </form>
  );
};

在这个例子中，我们新增了一个 error 信号来存储错误信息。当表单提交时，如果 inputValue 为空，就设置 error 为错误提示信息，并在页面上显示出来。如果输入不为空，则清空 error 并处理正常的提交逻辑。

正则表达式验证

除了非空验证，使用正则表达式可以进行更复杂的验证，比如验证邮箱格式、手机号码格式等。以邮箱验证为例：

import { createSignal } from 'solid-js';

const EmailForm = () => {
  const [email, setEmail] = createSignal('');
  const [error, setError] = createSignal('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email())) {
      setError('请输入有效的邮箱地址');
    } else {
      setError('');
      console.log('提交的邮箱:', email());
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email()}
        onInput={(e) => setEmail(e.target.value)}
      />
      {error() && <p style={{ color:'red' }}>{error()}</p>}
      <button type="submit">提交</button>
    </form>
  );
};

这里定义了一个邮箱格式的正则表达式 emailRegex，在表单提交时使用 test 方法验证输入的邮箱是否符合格式。如果不符合，则设置相应的错误信息。

Solid.js 中的表单验证进阶

自定义验证函数

在实际项目中，我们可能需要更灵活的验证逻辑，这时候可以定义自定义验证函数。例如，我们要验证一个密码输入是否满足一定的强度要求（至少包含一个大写字母、一个小写字母和一个数字）。

import { createSignal } from'solid-js';

const validatePassword = (password) => {
  const hasUpperCase = /[A-Z]/.test(password);
  const hasLowerCase = /[a-z]/.test(password);
  const hasNumber = /\d/.test(password);
  return hasUpperCase && hasLowerCase && hasNumber;
};

const PasswordForm = () => {
  const [password, setPassword] = createSignal('');
  const [error, setError] = createSignal('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!validatePassword(password())) {
      setError('密码必须包含一个大写字母、一个小写字母和一个数字');
    } else {
      setError('');
      console.log('提交的密码:', password());
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="password"
        value={password()}
        onInput={(e) => setPassword(e.target.value)}
      />
      {error() && <p style={{ color:'red' }}>{error()}</p>}
      <button type="submit">提交</button>
    </form>
  );
};

在这个例子中，validatePassword 函数接收一个密码字符串，并通过正则表达式验证其是否满足强度要求。在表单提交时调用这个自定义函数进行验证。

多个字段关联验证

有时候，表单中的多个字段之间存在关联关系，需要进行关联验证。比如，在一个注册表单中，要求两次输入的密码必须一致。

import { createSignal } from'solid-js';

const RegistrationForm = () => {
  const [password, setPassword] = createSignal('');
  const [confirmPassword, setConfirmPassword] = createSignal('');
  const [error, setError] = createSignal('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password()!== confirmPassword()) {
      setError('两次输入的密码不一致');
    } else {
      setError('');
      console.log('注册成功，密码:', password());
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="password"
        value={password()}
        onInput={(e) => setPassword(e.target.value)}
        placeholder="输入密码"
      />
      <input
        type="password"
        value={confirmPassword()}
        onInput={(e) => setConfirmPassword(e.target.value)}
        placeholder="确认密码"
      />
      {error() && <p style={{ color:'red' }}>{error()}</p>}
      <button type="submit">注册</button>
    </form>
  );
};

这里通过比较 password 和 confirmPassword 两个信号的值来进行关联验证。如果两者不一致，则设置错误信息。

表单验证与状态管理

使用全局状态管理验证结果

在一些大型应用中，可能需要在全局层面管理表单的验证结果。我们可以结合 Solid.js 的上下文（Context）来实现这一点。首先，创建一个验证上下文：

import { createContext, createSignal } from'solid-js';

const ValidationContext = createContext();

const ValidationProvider = ({ children }) => {
  const [validationResults, setValidationResults] = createSignal({});

  return (
    <ValidationContext.Provider value={[validationResults, setValidationResults]}>
      {children}
    </ValidationContext.Provider>
  );
};

export { ValidationContext, ValidationProvider };

然后，在表单组件中使用这个上下文：

import { createSignal, useContext } from'solid-js';
import { ValidationContext } from './ValidationContext';

const GlobalValidationForm = () => {
  const [inputValue, setInputValue] = createSignal('');
  const [validationResults, setValidationResults] = useContext(ValidationContext);

  const handleSubmit = (e) => {
    e.preventDefault();
    const isValid = inputValue()!== '';
    const newResults = {
     ...validationResults(),
      inputField: isValid? 'valid' : 'invalid'
    };
    setValidationResults(newResults);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue()}
        onInput={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">提交</button>
    </form>
  );
};

在这个例子中，ValidationProvider 提供了一个包含验证结果状态的上下文。表单组件通过 useContext 获取这个上下文，并在提交时更新验证结果，这些结果可以在全局范围内被其他组件使用。

验证状态与 UI 交互

验证结果不仅用于判断数据是否有效，还可以用于控制 UI 的交互。比如，根据验证结果禁用提交按钮。

import { createSignal } from'solid-js';

const DisabledSubmitForm = () => {
  const [inputValue, setInputValue] = createSignal('');
  const [isValid, setIsValid] = createSignal(false);

  const handleInput = (e) => {
    const value = e.target.value;
    setInputValue(value);
    setIsValid(value!== '');
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交的值:', inputValue());
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue()}
        onInput={handleInput}
      />
      <button type="submit" disabled={!isValid()}>提交</button>
    </form>
  );
};

这里通过 isValid 信号来控制提交按钮的 disabled 属性。当输入框不为空时，isValid 为 true，提交按钮可用；否则，按钮被禁用。

表单验证的实时反馈

实时验证输入

在用户输入时实时进行验证可以提供更好的用户体验。我们可以在 onInput 事件中进行验证。

import { createSignal } from'solid-js';

const RealTimeValidationForm = () => {
  const [inputValue, setInputValue] = createSignal('');
  const [error, setError] = createSignal('');

  const handleInput = (e) => {
    const value = e.target.value;
    setInputValue(value);
    if (value === '') {
      setError('输入不能为空');
    } else {
      setError('');
    }
  };

  return (
    <form>
      <input
        type="text"
        value={inputValue()}
        onInput={handleInput}
      />
      {error() && <p style={{ color:'red' }}>{error()}</p>}
    </form>
  );
};

在这个例子中，每次用户输入时，handleInput 函数会检查输入是否为空，并实时更新错误信息。

验证样式反馈

除了显示错误信息，还可以通过样式反馈来提示用户输入是否有效。比如，给输入框添加不同的边框颜色。

import { createSignal } from'solid-js';

const StyleFeedbackForm = () => {
  const [inputValue, setInputValue] = createSignal('');
  const [isValid, setIsValid] = createSignal(true);

  const handleInput = (e) => {
    const value = e.target.value;
    setInputValue(value);
    setIsValid(value!== '');
  };

  return (
    <form>
      <input
        type="text"
        value={inputValue()}
        onInput={handleInput}
        style={{
          border: isValid()? '1px solid green' : '1px solid red'
        }}
      />
    </form>
  );
};

这里根据 isValid 信号的值为输入框设置不同的边框颜色，绿色表示输入有效，红色表示输入无效。

复杂表单验证场景

嵌套表单验证

在一些复杂的表单中，可能存在嵌套的表单结构。比如，一个订单表单中包含多个商品子表单。我们需要对每个子表单以及整个父表单进行验证。

import { createSignal } from'solid-js';

const ProductForm = () => {
  const [productName, setProductName] = createSignal('');
  const [productPrice, setProductPrice] = createSignal('');
  const [productError, setProductError] = createSignal('');

  const handleProductInput = (e, type) => {
    if (type === 'name') {
      setProductName(e.target.value);
      if (e.target.value === '') {
        setProductError('商品名称不能为空');
      } else {
        setProductError('');
      }
    } else if (type === 'price') {
      setProductPrice(e.target.value);
      const price = parseFloat(e.target.value);
      if (isNaN(price) || price <= 0) {
        setProductError('价格必须是有效的正数');
      } else {
        setProductError('');
      }
    }
  };

  return (
    <div>
      <input
        type="text"
        value={productName()}
        onInput={(e) => handleProductInput(e, 'name')}
        placeholder="商品名称"
      />
      <input
        type="number"
        value={productPrice()}
        onInput={(e) => handleProductInput(e, 'price')}
        placeholder="商品价格"
      />
      {productError() && <p style={{ color:'red' }}>{productError()}</p>}
    </div>
  );
};

const OrderForm = () => {
  const [products, setProducts] = createSignal([{ name: '', price: '' }]);
  const [orderError, setOrderError] = createSignal('');

  const addProduct = () => {
    setProducts([...products(), { name: '', price: '' }]);
  };

  const handleOrderSubmit = (e) => {
    e.preventDefault();
    const allValid = products().every((product) => product.name!== '' &&!isNaN(parseFloat(product.price)) && parseFloat(product.price) > 0);
    if (!allValid) {
      setOrderError('请确保所有商品信息填写正确');
    } else {
      setOrderError('');
      console.log('订单提交成功:', products());
    }
  };

  return (
    <form onSubmit={handleOrderSubmit}>
      {products().map((product, index) => (
        <ProductForm key={index} />
      ))}
      <button type="button" onClick={addProduct}>添加商品</button>
      {orderError() && <p style={{ color:'red' }}>{orderError()}</p>}
      <button type="submit">提交订单</button>
    </form>
  );
};

在这个例子中，ProductForm 是一个子表单组件，负责单个商品信息的验证。OrderForm 是父表单组件，包含多个 ProductForm 实例，并在提交时验证所有子表单的有效性。

动态表单验证

动态表单是指表单的字段数量或类型可以根据用户操作动态变化。比如，一个调查问卷表单，用户可以根据需求添加更多问题。在 Solid.js 中处理动态表单验证需要结合数组状态和循环渲染。

import { createSignal } from'solid-js';

const QuestionForm = () => {
  const [question, setQuestion] = createSignal('');
  const [answer, setAnswer] = createSignal('');
  const [questionError, setQuestionError] = createSignal('');
  const [answerError, setAnswerError] = createSignal('');

  const handleQuestionInput = (e) => {
    setQuestion(e.target.value);
    if (e.target.value === '') {
      setQuestionError('问题不能为空');
    } else {
      setQuestionError('');
    }
  };

  const handleAnswerInput = (e) => {
    setAnswer(e.target.value);
    if (e.target.value === '') {
      setAnswerError('答案不能为空');
    } else {
      setAnswerError('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={question()}
        onInput={handleQuestionInput}
        placeholder="输入问题"
      />
      {questionError() && <p style={{ color:'red' }}>{questionError()}</p>}
      <input
        type="text"
        value={answer()}
        onInput={handleAnswerInput}
        placeholder="输入答案"
      />
      {answerError() && <p style={{ color:'red' }}>{answerError()}</p>}
    </div>
  );
};

const SurveyForm = () => {
  const [questions, setQuestions] = createSignal([{ question: '', answer: '' }]);
  const [surveyError, setSurveyError] = createSignal('');

  const addQuestion = () => {
    setQuestions([...questions(), { question: '', answer: '' }]);
  };

  const handleSurveySubmit = (e) => {
    e.preventDefault();
    const allValid = questions().every((question) => question.question!== '' && question.answer!== '');
    if (!allValid) {
      setSurveyError('请确保所有问题和答案都填写完整');
    } else {
      setSurveyError('');
      console.log('调查问卷提交成功:', questions());
    }
  };

  return (
    <form onSubmit={handleSurveySubmit}>
      {questions().map((question, index) => (
        <QuestionForm key={index} />
      ))}
      <button type="button" onClick={addQuestion}>添加问题</button>
      {surveyError() && <p style={{ color:'red' }}>{surveyError()}</p>}
      <button type="submit">提交问卷</button>
    </form>
  );
};

这里 QuestionForm 是每个动态问题的表单组件，SurveyForm 负责管理整个调查问卷表单，包括动态添加问题和整体验证。

通过以上内容，我们全面深入地探讨了 Solid.js 中 JSX 表单处理与验证的各个方面，从基础的表单元素绑定到复杂的验证场景，希望能帮助开发者在实际项目中更好地处理表单相关的功能。