html5中那些原生的驗證，如required、pattern等，在驗證無效時，那些彈出的提示框是怎麼實現的？為什麼當因為不同的約束條件不滿足而無效時，會跳出不同內容的提示框？是不是結合invalid事件和validity屬性實現的？ setCustomValidity()方法的工作原理是什麼？感覺這塊內容越看越亂，還請大牛指教…
欢迎选择我的课程，让我们一起见证您的进步~~
去看MDN上的表單驗證吧，我覺得說的還是挺清楚的，你可以按照它給的小demo一點點擼，慢慢就明白了。
required:空白驗證，比如說：
<form> <input type="text" required oninvalid="setCustomValidity('此处不能为空！')" oninput=('setCustomValidity()')> <input type="submit" value="提交"> </form>
如果input[type=text]的value為空，就會彈出提示框，並且阻止表單提交；pattern:匹配正規表示式，比如說：
<form> <input type="text" pattern="[0-9]{3}" oninvalid="setCustomValidity('请输入3个数字！')" oninput=('setCustomValidity()')> <input type="submit" value="提交"> </form>
如若input[type=text]的value不為3個數字，在點擊提交按鈕的時候，就會提出提示
去看MDN上的表單驗證吧，我覺得說的還是挺清楚的，你可以按照它給的小demo一點點擼，慢慢就明白了。
required:空白驗證，比如說：
如果input[type=text]的value為空，就會彈出提示框，並且阻止表單提交；
pattern:匹配正規表示式，比如說：
如若input[type=text]的value不為3個數字，在點擊提交按鈕的時候，就會提出提示