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