面试题：Solid.js的JSX表单验证逻辑实现

Question

假设你有一个Solid.js的注册表单，包含用户名、密码和确认密码字段。请实现密码和确认密码的一致性验证逻辑，并在输入不匹配时显示错误信息。要求用Solid.js的响应式原理和JSX来完成，给出完整的组件代码。

Answer 1

import { createSignal } from 'solid-js';

const RegistrationForm = () => {
  const [username, setUsername] = createSignal('');
  const [password, setPassword] = createSignal('');
  const [confirmPassword, setConfirmPassword] = createSignal('');
  const [passwordError, setPasswordError] = createSignal('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password() === confirmPassword()) {
      setPasswordError('');
      // 这里可以添加实际的提交逻辑
    } else {
      setPasswordError('密码和确认密码不匹配');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        用户名:
        <input type="text" value={username()} onChange={(e) => setUsername(e.target.value)} />
      </label>
      <br />
      <label>
        密码:
        <input type="password" value={password()} onChange={(e) => setPassword(e.target.value)} />
      </label>
      <br />
      <label>
        确认密码:
        <input type="password" value={confirmPassword()} onChange={(e) => setConfirmPassword(e.target.value)} />
      </label>
      {passwordError() && <p style={{ color: 'red' }}>{passwordError()}</p>}
      <br />
      <input type="submit" value="注册" />
    </form>
  );
};

export default RegistrationForm;