2023年6月21日发(作者：)
html5表单原⽣⾃定义验证这段时间在重构⾃⼰以前做的项⽬，在做到注册时花了不少时间，原先是打算做⽤户名，密码,确认密码，邮箱，⼿机这⼏个选项，但写了半天后测试发现有不少问题，就⼲脆删繁就简，只留下了⽤户名和密码两项按照设定，⽤户名要做唯⼀性检测，只能数字或字母，最⼤25位，密码则有很多条规则：1密码位数在6到25之间2密码不能是⽤户名或反转的⽤户名3密码不能是纯字母或纯数字4密码不能包含特殊符号5密码不能为简单密码,如abc1236严格区分⼤⼩写⾸先是⽤户名的验证，不要看这个格式，这是编辑器格式化后的在placeholder⾥提⽰只能数字或字母，maxlength给予25位限制，require必填项，autofoucus⾃动聚焦到⽤户名，检测输⼊事件，⽤正则表达式将不符合的值替换掉然后是请求检测⽤户名是否存在的接⼝，在失去焦点时调⽤CheckUserNameIsExits的js⽅法function CheckUserNameIsExits() { $.get("Index/Index/CheckUserIsExitsByUserName", {UserName: mentById("username").value}, function (a) { var UserNameBox = mentById("username") if (a === true) { tomValidity("该⽤户已存在") } else { tomValidity("") } })}由于项⽬没有使⽤bootstrap，也没有使⽤任何验证插件，再加上⾃⼰不想造轮⼦，于是采⽤了html5⾃带的表单验证，⾃带的虽然谈不上多好看，但也能接受setCustomValidity可⽤来显⽰⾃定义的错误信息，同时会⾃动阻⽌表单提交，当信息为空时被视为通过验证，注意，setCustomValidity不能使⽤jquery的元素选择器获得的元素触发，似乎只能使⽤document获取元素触发由于我在前⾯已加载了jquery，可以直接使⽤get的ajax提交，如果没有就⾃⼰写⼜臭⼜长的ajax提交吧接下来是密码的验证同样的我给了最⼩最⼤长度限制，在输⼊值长度⼤于5时才调⽤CheckPassword进⾏检测function CheckPassword() { var password=mentById("password").value if(>5){ if (CheckSimplePassword(password, mentById("username").value)) { mentById("password").setCustomValidity("") } else { mentById("password").setCustomValidity("密码格式不正确") } }}由于密码验证复杂了些，我再度进⾏了封装function CheckSimplePassword(Password, UserName) { 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 (f(rCase()) > -1) { return false } return true} if (Password == UserName || Password == ("").reverse().join("")||/^d+$/.test(Password)||/^[a-z]+$/(Password)||!/^[A-Za-z0-9]+$/.test(("").reverse().join("")是⽤户名反转相同检测，/^d+$/.test(Password)数字检测，/^[a-z]+$/(Password)字母检测，!/^[A-Za-z0-9]+$/.test(Password)⾮字母数字检测，然后是检测弱密码，由于弱密码形式太多，只能⼿写数组就这样html5原⽣表单检测完成了，当然前端检测只能防君⼦，防不住⼩⼈，安全要求略⾼的必须还要在后端对⽤户提交的值进⾏检测，然⽽这就不是本⽂该说的范畴了
2023年6月21日发(作者：)
html5表单原⽣⾃定义验证这段时间在重构⾃⼰以前做的项⽬，在做到注册时花了不少时间，原先是打算做⽤户名，密码,确认密码，邮箱，⼿机这⼏个选项，但写了半天后测试发现有不少问题，就⼲脆删繁就简，只留下了⽤户名和密码两项按照设定，⽤户名要做唯⼀性检测，只能数字或字母，最⼤25位，密码则有很多条规则：1密码位数在6到25之间2密码不能是⽤户名或反转的⽤户名3密码不能是纯字母或纯数字4密码不能包含特殊符号5密码不能为简单密码,如abc1236严格区分⼤⼩写⾸先是⽤户名的验证，不要看这个格式，这是编辑器格式化后的在placeholder⾥提⽰只能数字或字母，maxlength给予25位限制，require必填项，autofoucus⾃动聚焦到⽤户名，检测输⼊事件，⽤正则表达式将不符合的值替换掉然后是请求检测⽤户名是否存在的接⼝，在失去焦点时调⽤CheckUserNameIsExits的js⽅法function CheckUserNameIsExits() { $.get("Index/Index/CheckUserIsExitsByUserName", {UserName: mentById("username").value}, function (a) { var UserNameBox = mentById("username") if (a === true) { tomValidity("该⽤户已存在") } else { tomValidity("") } })}由于项⽬没有使⽤bootstrap，也没有使⽤任何验证插件，再加上⾃⼰不想造轮⼦，于是采⽤了html5⾃带的表单验证，⾃带的虽然谈不上多好看，但也能接受setCustomValidity可⽤来显⽰⾃定义的错误信息，同时会⾃动阻⽌表单提交，当信息为空时被视为通过验证，注意，setCustomValidity不能使⽤jquery的元素选择器获得的元素触发，似乎只能使⽤document获取元素触发由于我在前⾯已加载了jquery，可以直接使⽤get的ajax提交，如果没有就⾃⼰写⼜臭⼜长的ajax提交吧接下来是密码的验证同样的我给了最⼩最⼤长度限制，在输⼊值长度⼤于5时才调⽤CheckPassword进⾏检测function CheckPassword() { var password=mentById("password").value if(>5){ if (CheckSimplePassword(password, mentById("username").value)) { mentById("password").setCustomValidity("") } else { mentById("password").setCustomValidity("密码格式不正确") } }}由于密码验证复杂了些，我再度进⾏了封装function CheckSimplePassword(Password, UserName) { 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 (f(rCase()) > -1) { return false } return true} if (Password == UserName || Password == ("").reverse().join("")||/^d+$/.test(Password)||/^[a-z]+$/(Password)||!/^[A-Za-z0-9]+$/.test(("").reverse().join("")是⽤户名反转相同检测，/^d+$/.test(Password)数字检测，/^[a-z]+$/(Password)字母检测，!/^[A-Za-z0-9]+$/.test(Password)⾮字母数字检测，然后是检测弱密码，由于弱密码形式太多，只能⼿写数组就这样html5原⽣表单检测完成了，当然前端检测只能防君⼦，防不住⼩⼈，安全要求略⾼的必须还要在后端对⽤户提交的值进⾏检测，然⽽这就不是本⽂该说的范畴了
发布评论