html5表單原生自定義驗證

這段時間在重構本身之前作的項目，在作到註冊時花了很多時間，原先是打算作用戶名，密碼,確認密碼，郵箱，手機這幾個選項，但寫了半天后測試發現有很多問題，就乾脆刪繁就簡，只留下了用戶名和密碼兩項

按照設定，用戶名要作惟一性檢測，只能數字或字母，最大25位，密碼則有不少條規則：
1密碼位數在6到25之間
2密碼不能是用戶名或反轉的用戶名
3密碼不能是純字母或純數字
4密碼不能包含特殊符號
5密碼不能爲簡單密碼,如abc123
6嚴格區分大小寫

首先是用戶名的驗證，不要看這個格式，這是編輯器格式化後的

<input type="text" id="username" placeholder="用戶名(只能是數字或字母)" maxlength="25" required autofocus
                       name="UserName" oninput="value=value.replace(/[^\w\.\/]/ig,'')" onblur="CheckUserNameIsExits()">

在placeholder裏提示只能數字或字母，maxlength給予25位限制，require必填項，autofoucus自動聚焦到用戶名，檢測輸入事件，用正則表達式將不符合的值替換掉

而後是請求檢測用戶名是否存在的接口，在失去焦點時調用CheckUserNameIsExits的js方法

function CheckUserNameIsExits() {
    $.get("Index/Index/CheckUserIsExitsByUserName", {UserName: document.getElementById("username").value}, function (a) {
        var UserNameBox = document.getElementById("username")
        if (a === true) {
            UserNameBox.setCustomValidity("該用戶已存在")
        } else {
            UserNameBox.setCustomValidity("")
        }
    })
}

因爲項目沒有使用bootstrap，也沒有使用任何驗證插件，再加上本身不想造輪子，因而採用了html5自帶的表單驗證，自帶的雖然談不上多好看，但也能接受

setCustomValidity可用來顯示自定義的錯誤信息，同時會自動阻止表單提交，當信息爲空時被視爲經過驗證，注意，setCustomValidity不能使用jquery的元素選擇器得到的元素觸發，彷佛只能使用document獲取元素觸發

因爲我在前面已加載了jquery，能夠直接使用get的ajax提交，若是沒有就本身寫又臭又長的ajax提交吧

接下來是密碼的驗證

<input type="password" id="password" placeholder="密碼" maxlength="25" required minlength="6"
                       name="Password" oninput="if(value.length>5)CheckPassword()">

一樣的我給了最小最大長度限制，在輸入值長度大於5時才調用CheckPassword進行檢測

function CheckPassword() {
    var password=document.getElementById("password").value
    if(password.length>5){
        if (CheckSimplePassword(password, document.getElementById("username").value)) {
            document.getElementById("password").setCustomValidity("")
        }
        else {
            document.getElementById("password").setCustomValidity("密碼格式不正確")
        }
    }
}

因爲密碼驗證複雜了些，我再度進行了封裝

function CheckSimplePassword(Password, UserName) {
    if (Password == UserName || Password == UserName.split("").reverse().join("")||/^\d+$/.test(Password)||/^[a-z]+$/i.test(Password)||!/^[A-Za-z0-9]+$/.test(Password)) {
        return false;
    }
    var String = ["abc123", "123abc", "password1", "1qaz2wsx", "qq123456", "1q2w3e4r", "123456abc", "abcd1234", "1234qwer", "123456789a", "aa123456",
        "123456aa","asd123456","code8925","ms0083jxj","123456qq","asdf1234","q1w2e3r4","12345678a","woaini1314","1234abcd","123qweasd","1qazxsw2",
        "kingcom5","zxcvbnm123", "1q2w3e4r5t"]
    if (String.indexOf(Password.toLowerCase()) > -1) {
        return false
    }
    return true
}

UserName.split("").reverse().join("")是用戶名反轉相同檢測，/^\d+$/.test(Password)數字檢測，/^[a-z]+$/i.test(Password)字母檢測，!/^[A-Za-z0-9]+$/.test(Password)非字母數字檢測，而後是檢測弱密碼，因爲弱密碼形式太多，只能手寫數組

就這樣html5原生表單檢測完成了，固然前端檢測只能防君子，防不住小人，安全要求略高的必須還要在後端對用戶提交的值進行檢測，然而這就不是本文該說的範疇了