Validator Basic

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-8">
    <!-- 基本验证器 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">Basic Input Validation</h3>
      <div class="space-y-3">
        <!-- 邮箱验证 -->
        <div class="form-control">
          <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
          <input type="email" required placeholder="[email protected]" 
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer invalid:border-red-500 valid:border-green-500" />
          <p class="mt-1 text-xs text-red-500 invisible peer-invalid:visible">Please enter a valid email address</p>
        </div>

        <!-- 必填输入 -->
        <div class="form-control">
          <label class="block text-sm font-medium text-gray-700 mb-1">Full Name <span class="text-red-500">*</span></label>
          <input type="text" required placeholder="John Doe" 
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer invalid:border-red-500" />
          <p class="mt-1 text-xs text-red-500 invisible peer-invalid:visible">This field is required</p>
        </div>

        <!-- 长度限制 -->
        <div class="form-control">
          <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
          <input type="text" required minlength="3" maxlength="20" placeholder="username" 
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer invalid:border-red-500 valid:border-green-500" />
          <p class="mt-1 text-xs text-red-500 invisible peer-invalid:visible">Username must be 3-20 characters long</p>
        </div>
      </div>
    </div>

    <!-- 高级验证模式 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">Advanced Pattern Validation</h3>
      <div class="space-y-3">
        <!-- 密码验证 -->
        <div class="form-control">
          <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
          <input type="password" required minlength="8" 
            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
            placeholder="Enter your password" 
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer invalid:border-red-500 valid:border-green-500" />
          <div class="mt-1 text-xs text-red-500 invisible peer-invalid:visible space-y-1">
            <p>Password must contain:</p>
            <ul class="list-disc pl-5">
              <li>At least 8 characters</li>
              <li>At least one number</li>
              <li>At least one uppercase letter</li>
              <li>At least one lowercase letter</li>
            </ul>
          </div>
        </div>

        <!-- 电话号码验证 -->
        <div class="form-control">
          <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
          <input type="tel" required pattern="[0-9]{10}" placeholder="1234567890"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer invalid:border-red-500 valid:border-green-500 tabular-nums" />
          <p class="mt-1 text-xs text-red-500 invisible peer-invalid:visible">Enter a 10-digit phone number</p>
        </div>

        <!-- URL验证 -->
        <div class="form-control">
          <label class="block text-sm font-medium text-gray-700 mb-1">Website URL</label>
          <input type="url" required placeholder="https://example.com" 
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer invalid:border-red-500 valid:border-green-500" />
          <p class="mt-1 text-xs text-red-500 invisible peer-invalid:visible">Enter a valid URL starting with http:// or https://</p>
        </div>
      </div>
    </div>
  </div>
</section>