验证器

验证器类根据输入的验证规则更改表单元素的颜色为错误或成功。

类名	类型
validator	组件	用于 input, select, textarea
validator-hint	部分	用于在输入无效时出现在输入框后的提示文本

验证器

写入无效的电子邮件地址会将错误颜色应用于输入框。有效的电子邮件地址应用成功颜色。

<input class="$$input $$validator" type="email" required placeholder="mail@site.com" />

<input class="$$input $$validator" type="email" required placeholder="mail@site.com" />

            
                <input class="$$input $$validator" type="email" required placeholder="mail@site.com" />

<input class="$$input $$validator" type="email" required placeholder="mail@site.com" />

验证器和 validator-hint

如果值无效，提示文本将出现在输入框下方。

<input class="$$input $$validator" type="email" required placeholder="mail@site.com" />
<div class="$$validator-hint">Enter valid email address</div>

<input class="$$input $$validator" type="email" required placeholder="mail@site.com" />
<div class="$$validator-hint">Enter valid email address</div>

            
                <input class="$$input $$validator" type="email" required placeholder="mail@site.com" />
<div class="$$validator-hint">Enter valid email address</div>

<input class="$$input $$validator" type="email" required placeholder="mail@site.com" />
<div class="$$validator-hint">Enter valid email address</div>

validator-hintclass 将不可见，如果它在validatorclass 之后，那么如果输入无效，validator-hint将变为可见。
validator-hint即使它不可见，仍然占用空间，因为我们不希望在提示出现时发生布局偏移。
如果您希望在提示不可见时隐藏提示，请添加hiddenclass 到validator-hint。当它隐藏时，它将不占用空间，如果输入无效，它将出现并占用空间。

密码要求验证器

<input type="password" class="$$input $$validator" required placeholder="Password" minlength="8" 
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
  title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
<p class="$$validator-hint">
  Must be more than 8 characters, including
  <br/>At least one number
  <br/>At least one lowercase letter
  <br/>At least one uppercase letter
</p>

<input type="password" class="$$input $$validator" required placeholder="Password" minlength="8" 
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
  title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
<p class="$$validator-hint">
  Must be more than 8 characters, including
  <br/>At least one number
  <br/>At least one lowercase letter
  <br/>At least one uppercase letter
</p>

            
                <input type="password" class="$$input $$validator" required placeholder="Password" minlength="8" 
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
  title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
<p class="$$validator-hint">
  Must be more than 8 characters, including
  <br/>At least one number
  <br/>At least one lowercase letter
  <br/>At least one uppercase letter
</p>

<input type="password" class="$$input $$validator" required placeholder="Password" minlength="8" 
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
  title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
<p class="$$validator-hint">
  Must be more than 8 characters, including
  <br/>At least one number
  <br/>At least one lowercase letter
  <br/>At least one uppercase letter
</p>

用户名要求验证器

<input type="input" class="$$input $$validator" required placeholder="Username" 
  pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
<p class="$$validator-hint">
  Must be 3 to 30 characters
  <br/>containing only letters, numbers or dash
</p>

<input type="input" class="$$input $$validator" required placeholder="Username" 
  pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
<p class="$$validator-hint">
  Must be 3 to 30 characters
  <br/>containing only letters, numbers or dash
</p>

            
                <input type="input" class="$$input $$validator" required placeholder="Username" 
  pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
<p class="$$validator-hint">
  Must be 3 to 30 characters
  <br/>containing only letters, numbers or dash
</p>

<input type="input" class="$$input $$validator" required placeholder="Username" 
  pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" title="Only letters, numbers or dash" />
<p class="$$validator-hint">
  Must be 3 to 30 characters
  <br/>containing only letters, numbers or dash
</p>

电话号码要求验证器

<input type="tel" class="$$input $$validator tabular-nums" required placeholder="Phone" 
  pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
<p class="$$validator-hint">Must be 10 digits</p>

<input type="tel" class="$$input $$validator tabular-nums" required placeholder="Phone" 
  pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
<p class="$$validator-hint">Must be 10 digits</p>

            
                <input type="tel" class="$$input $$validator tabular-nums" required placeholder="Phone" 
  pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
<p class="$$validator-hint">Must be 10 digits</p>

<input type="tel" class="$$input $$validator tabular-nums" required placeholder="Phone" 
  pattern="[0-9]*" minlength="10" maxlength="10" title="Must be 10 digits" />
<p class="$$validator-hint">Must be 10 digits</p>

URL 输入要求验证器

<input type="url" class="$$input $$validator" required placeholder="https://" value="https://"
  pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9-].*[a-zA-Z0-9])?.)+[a-zA-Z].*$" 
  title="Must be valid URL" />
<p class="$$validator-hint">Must be valid URL</p>

<input type="url" class="$$input $$validator" required placeholder="https://" value="https://"
  pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9-].*[a-zA-Z0-9])?.)+[a-zA-Z].*$" 
  title="Must be valid URL" />
<p class="$$validator-hint">Must be valid URL</p>

            
                <input type="url" class="$$input $$validator" required placeholder="https://" value="https://"
  pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9-].*[a-zA-Z0-9])?.)+[a-zA-Z].*$" 
  title="Must be valid URL" />
<p class="$$validator-hint">Must be valid URL</p>

<input type="url" class="$$input $$validator" required placeholder="https://" value="https://"
  pattern="^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9-].*[a-zA-Z0-9])?.)+[a-zA-Z].*$" 
  title="Must be valid URL" />
<p class="$$validator-hint">Must be valid URL</p>

日期输入要求验证器

<input type="date" class="$$input $$validator" required placeholder="Pick a date in 2025" 
min="2025-01-01" max="2025-12-31"
  title="Must be valid URL" />
<p class="$$validator-hint">Must be 2025</p>

<input type="date" class="$$input $$validator" required placeholder="Pick a date in 2025" 
min="2025-01-01" max="2025-12-31"
  title="Must be valid URL" />
<p class="$$validator-hint">Must be 2025</p>

            
                <input type="date" class="$$input $$validator" required placeholder="Pick a date in 2025" 
min="2025-01-01" max="2025-12-31"
  title="Must be valid URL" />
<p class="$$validator-hint">Must be 2025</p>

<input type="date" class="$$input $$validator" required placeholder="Pick a date in 2025" 
min="2025-01-01" max="2025-12-31"
  title="Must be valid URL" />
<p class="$$validator-hint">Must be 2025</p>

数字输入要求验证器

<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10" 
min="1" max="10"
  title="Must be between be 1 to 10" />
<p class="$$validator-hint">Must be between be 1 to 10</p>

<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10" 
min="1" max="10"
  title="Must be between be 1 to 10" />
<p class="$$validator-hint">Must be between be 1 to 10</p>

            
                <input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10" 
min="1" max="10"
  title="Must be between be 1 to 10" />
<p class="$$validator-hint">Must be between be 1 to 10</p>

<input type="number" class="$$input $$validator" required placeholder="Type a number between 1 to 10" 
min="1" max="10"
  title="Must be between be 1 to 10" />
<p class="$$validator-hint">Must be between be 1 to 10</p>

复选框要求验证器

<input type="checkbox" class="$$checkbox $$validator" required title="Required" />
<p class="$$validator-hint">Required</p>

<input type="checkbox" class="$$checkbox $$validator" required title="Required" />
<p class="$$validator-hint">Required</p>

            
                <input type="checkbox" class="$$checkbox $$validator" required title="Required" />
<p class="$$validator-hint">Required</p>

<input type="checkbox" class="$$checkbox $$validator" required title="Required" />
<p class="$$validator-hint">Required</p>

切换要求验证器

<input type="checkbox" class="$$toggle $$validator" required title="Required" />
<p class="$$validator-hint">Required</p>

<input type="checkbox" class="$$toggle $$validator" required title="Required" />
<p class="$$validator-hint">Required</p>

            
                <input type="checkbox" class="$$toggle $$validator" required title="Required" />
<p class="$$validator-hint">Required</p>

<input type="checkbox" class="$$toggle $$validator" required title="Required" />
<p class="$$validator-hint">Required</p>

选择要求验证器

在选择选项之前单击按钮以查看错误颜色。

<form>
  <select class="$$select $$validator" required>
    <option disabled selected value="">Choose:</option>
    <option>Tabs</option>
    <option>Spaces</option>
  </select>
  <p class="$$validator-hint">Required</p>
  <button class="$$btn" type="submit">Submit form</button>
</form>

<form>
  <select class="$$select $$validator" required>
    <option disabled selected value="">Choose:</option>
    <option>Tabs</option>
    <option>Spaces</option>
  </select>
  <p class="$$validator-hint">Required</p>
  <button class="$$btn" type="submit">Submit form</button>
</form>

            
                <form>
  <select class="$$select $$validator" required>
    <option disabled selected value="">Choose:</option>
    <option>Tabs</option>
    <option>Spaces</option>
  </select>
  <p class="$$validator-hint">Required</p>
  <button class="$$btn" type="submit">Submit form</button>
</form>

<form>
  <select class="$$select $$validator" required>
    <option disabled selected value="">Choose:</option>
    <option>Tabs</option>
    <option>Spaces</option>
  </select>
  <p class="$$validator-hint">Required</p>
  <button class="$$btn" type="submit">Submit form</button>
</form>