先添加一个表单，一个表单可以使用一组 form 元素包装一下 .. 它里面就是表单里的不同的元素 ..

元素可以有个包装，上面加上 form-group .. 里面是一个 text 类型的 input ，上面加上 form-control 这个类 .. 再添加一个 placeholder 设置一个点位符文字 .. 输入...

在这个文本框元素的下面，再去添加一个 submit 类型的 button 元素 .. 就是一个提交按钮 .. 上面加上 btn btn-primary .. 按钮上的文字是 提交 ..

然后在这个文本框上面添加一个 required .. 这样在提交表单的时候就会要求在这个文本框里必须得有内容 ..

再试一下 .. 直接按一下 提交 这个链接 .. 浏览器上会显示一个 请填写此字段 .. 这个是浏览器默认的验证方式 ..

自定义验证

下面我们再去实施一个自定义的表单验证 .. 在每个表单元素里我们可以先添加点要验证失败以后显示的文字 .. 一个 div .. 上面加上 invalid-feedback .. 在里面再输入点文字 .. 请在文本框里输入点东西：）

这个文字在元素验证失败的时候才会出现在界面上 ..

在这个表单上面我们再添加一个 id ， 可以是 form-demo .. 再给它添加一个 novalidate 属性 .. 这样可以防止浏览器的默认的验证 ..

然后打开自定义的脚本 .. 去添加几行代码 ..

先找到页面上的 form-demo 这个元素 .. 就是我们的表单 .. 监听一下表单的 submit 事件 .. 给它一个回调 .. 接收一个 event ，事件参数 ..

里面先添加一个 form ，它的值就是 $(this)

然后判断一下 .. 如果 form[0]，这个 form 是个 jQuery 对象，方括号 0 可以得到表单元素本身 .. 这样我们就可以用一下表单的 checkValidity 这个方法去判断表单里的元素是否都通过了验证 . 如果等于 false ，也就是没通过验证 ..

我们就用一下 event.preventDefault() 阻止事件的默认行为 .. 下面再用一下 event.stopPropagation ，防止它冒泡 ..

下面再给表单，也就是 form ，去添加一个 css 类，用一下 addClass，添加的类是 was-validated ..

我们可以在这个表单里面，再去添加一个文本框 .. 直接复制一份 ..

预览

再去预览一下 .. 可以打开开发者工具 .. 元素 .. 选中页面上的这个 form ，注意这个元素上的 class 属性的变化 ..

然后只在第一个文本框里输入点内容 ..

再提交一下表单 .. 在这个 form 上面会出现一个 was-validated ..

这样没通过验证的元素就会有个红色边框 .. 下面还会显示一段描述文字 .. 通过了验证的表单元素会有一个绿色边框 ..

这里就是根据表单元素的 valid 还有 invalid 去添加的一些样式 ...