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原生表单检测完成了，固然前端检测只能防君子，防不住小人，安全要求略高的必须还要在后端对用户提交的值进行检测，然而这就不是本文该说的范畴了