6.9.9 校验状态

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.8k 阅读时长 ≈ 3 分钟

6.9.9 校验状态

Bootstrap为表单控件的校验状态提供了如下样式。

样式 描述
.has-success 校验成功,显示绿色。
.has-warning 警告,显示黄色。
.has-error 校验错误,显示红色。
将这些样式应用在包含表单控件的容器上,则该容器内所有表单控件、标签、帮助文本都会受到该样式的影响。

例如如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 校验状态 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <form action="http://www.fkit.org">
            <div class="form-group has-success">
                <label class="control-label" for="succ">成功</label>
                <input type="text" class="form-control" id="succ" aria-describedby="helpBlock">
                <span id="helpBlock" class="help-block">该输入控件校验通过.</span>
            </div>
            <div class="form-group has-warning">
                <label class="control-label" for="warning">警告</label>
                <input type="text" class="form-control" id="warning">
            </div>
            <div class="form-group has-error">
                <label class="control-label" for="error">错误</label>
                <input type="text" class="form-control" id="error">
            </div>
            <div class="has-success">
                <div class="radio">
                    <label>
                        <input type="radio" name="rd" value="option1"> 成功状态的单选框
                    </label>
                </div>
            </div>
            <div class="has-warning">
                <div class="radio">
                    <label>
                        <input type="radio" name="rd" value="option2"> 警告状态的单选框
                    </label>
                </div>
            </div>
            <div class="has-error">
                <div class="radio">
                    <label>
                        <input type="radio" name="rd" value="option3"> 错误状态的单选框
                    </label>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

在该页面代码中定义了6个<div>元素,每个<div>元素包含一组label、表单控件等,当程序对包含表单控件的<div>元素应用校验状态的样式时,会影响该容器内所有控件。
需要说明的是,上面这些校验状态的样式,仅仅只是通过颜色来表达—这种表达可能和约定俗成有关,这些颜色效果对于某些用户(如使用屏幕阅读器的用户、色盲用户)无效。如果需要向所有用户都提供正确的校验状态,Bootstrap 推荐在<label>标签上以文本形式显示提示信息,或使用Glyphicon 字体图标,或使用额外的帮助文本块。在下一节的示例中我们会看到使用额外信息来显示校验状态。