表單驗(yàn)證分類：

1、必填性：可以利用原生的表單元素的自身屬性，required ;當(dāng)采用表單原生的提交（非Ajax 異步請求（js方式提交））方式時(shí)，可以調(diào)起內(nèi)部的校驗(yàn)，不合法會(huì)有彈窗提示："請?zhí)顚懘俗侄?。這個(gè)是HTML5中新增的。

案例.png

點(diǎn)擊submit按鈕時(shí)候，表單內(nèi)必填字段處會(huì)有提示。
2、長度限制：利用原生自帶的maxlength="數(shù)字"，minlength="數(shù)字"
3、規(guī)定的類型：寫正則過濾，對應(yīng)錯(cuò)誤提示代碼。
4、邏輯校驗(yàn)：自己寫js代碼。（第一個(gè)數(shù)值要小于后一個(gè)數(shù)值-時(shí)間段的選擇等問題上）

原生表單的形式：

form(action method)>input[*]+input[submit]
每一個(gè)都是必要的，最外層必須由form 標(biāo)簽包裹，內(nèi)部必須由類型是submit的輸入框。

一些定制demo

1.修改必填性不合法時(shí)候的提示文字

核心代碼：

oninvalid="setCustomValidity('請輸入您的姓名');" oninput="setCustomValidity('');" 

完整代碼：

 <input type="text" id="username" required oninvalid="setCustomValidity('請輸入您的姓名');" oninput="setCustomValidity('');" >

demo.png

2.阻止form表單點(diǎn)擊提交按鈕時(shí)自動(dòng)提交

$("input:submit").click(function(e){
     e = e||window.event;
    e.preventDefault();    //阻止默認(rèn)行為
})

或是：
    form表單.onsubmit = function () {
        return false
    }

驗(yàn)證是否生效：
填寫好合法的字段，點(diǎn)擊提交，瀏覽器的刷新按鈕不動(dòng)（表單提交時(shí)同步行為，肯定會(huì)刷新頁面），說明ok了，或是給action一個(gè)提交的后臺(tái)地址，這里可以給百度的試試，點(diǎn)擊提交，不跳轉(zhuǎn)百度，說明ok。

刷新按鈕.png

3.定制required字段不符時(shí)的提示框的樣式。

對于這個(gè)H5的新功能，貌似只能修改文字。不同瀏覽器的渲染樣式是不一樣的（瀏覽器程序中定制了提示框的API）

）。

4.定制required字段不符時(shí)的輸入框的樣式。

html:
<input type="text" name="name" required>
css:
/* 無效 */
input:required:invalid{
    CSS代碼
}
/* 有效 */
input:required:valid{
    CSS代碼
}

5.占位符的樣式定制

 input::placeholder {
            color: #DDDDDD;
            font-size: 16px;
            letter-spacing: 1px;
        }

        /*placeholder兼容處理*/
 input::-webkit-input-placeholder {
            color: #DDDDDD;
            font-size: 16px;
            letter-spacing: 1px;
        }
 input:-ms-input-placeholder {
            color: #DDDDDD;
            font-size: 16px;
            letter-spacing: 1px;
        }

其他

submit和button提交表單的區(qū)別
input 的type 類型分別為submit和button時(shí)候放在form標(biāo)簽里的區(qū)別：

1. <input type="button" />單純的一個(gè)按鈕。沒有默認(rèn)行為，不寫js腳本的話，按下去什么反應(yīng)也沒有。

2. <input type="submit" /> 有默認(rèn)行為，點(diǎn)擊會(huì)提交 form，除非寫了js阻止它。(<form onsubmit="return false;"> )

3. <button> 標(biāo)簽，這個(gè)按鈕放在 form 中也會(huì)點(diǎn)擊自動(dòng)提交，比前兩個(gè)的優(yōu)點(diǎn)是樣式好定制些。缺點(diǎn)可能有瀏覽器兼容問題。

附一登錄的源碼：

可以到我的github上下載：
https://github.com/Macrolam/login

參考文章：

1：http://www.the-art-of-web.com/html/html5-form-validation/