第二十五谈：验证表单

本节课我们来开始学习 Bootstrap 的提供验证表单组件样式功能。

一．验证表单

1. 表单需要在提交前验证，如果出现不合法或合法，显示不同的样式；
2. 这里不实现动态脚本的提交效果，只设置验证表单的样式；
3. 使用.is-valid 和.is-invalid 实现成功或失败；
4. 对于提示文本，使用.valid-feedback 和.invalid-feedback；

      <form action="" class="form-row">
          <div class="form-group col-sm-6">
              <label for="user">用户名：</label>
              <input type="text" id="user" class="form-control is-valid" placeholder=" 请输入用户名">
              <div class="valid-feedback">success!</div>
              <div class="invalid-feedback">fail!</div>
          </div>
          <div class="form-group col-sm-6">
              <label for="password">密码：</label>
              <input type="password" id="password" class="form-control is-invalid" placeholder="请输入密码">
              <div class="valid-feedback">success!</div>
              <div class="invalid-feedback">fail!</div>
          </div>
          <div class="form-group col-sm-12">
              <div class="form-check">
                  <input type="checkbox" class="form-check-input is-invalid" id="check">
                  <label class="form-check-label" for="check">
                      确认协议
                  </label>
                  <div class="invalid-feedback">fail!</div>
              </div>
          </div>
      </form>

5. 更丰富的验证样式，支持复选、单选、下拉和上传；

      <form class="was-validated">
          <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="custom-check" required>
              <label class="custom-control-label" for="custom-check">确认协议</label>
              <div class="invalid-feedback">必须勾选</div>
          </div>
          <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="radio2" name="radio" required>
              <label class="custom-control-label" for="radio2">男</label>
          </div>
          <div class="custom-control custom-radio mb-3">
              <input type="radio" class="custom-control-input" id="radio1" name="radio" required>
              <label class="custom-control-label" for="radio1">女</label>
              <div class="invalid-feedback">必须勾选</div>
          </div>
          <div class="form-group">
              <select class="custom-select" required>
                  <option value="">选择城市</option>
                  <option value="1">北京</option>
                  <option value="2">上海</option>
                  <option value="3">深圳</option>
              </select>
              <div class="invalid-feedback">必须选择</div>
          </div>
          <div class="custom-file">
              <input type="file" class="custom-file-input" id="file" required>
              <label class="custom-file-label" for="file">选择文件...</label>
              <div class="invalid-feedback">必须上传</div>
          </div>
      </form>