During this period of time, I was rebuilding the projects I had done before, and it took a lot of time to complete the registration. Originally, I planned to do the options of username, password, confirm password, email, and mobile phone, but after writing for a long time, I found out that the test There are a lot of problems, so I simply cut out the complicated and simplified, leaving only the user name and password.
According to the settings, the user name needs to be uniquely tested, only numbers or letters, with a maximum of 25 digits, and there are many rules for the
password: 1. The number of digits in the password is between 6 and 25.
2. The password cannot be a user name or a reversed user. Name
3 Password cannot be pure letters or numbers
4 Password cannot contain special symbols
5 Password cannot be simple password, such as abc123
6 Strictly case sensitive
The first is the verification of the user name, don't look at this format, this is formatted by the editor
<input type="text" id="username" placeholder="用户名(只能是数字或字母)" maxlength="25" required autofocus
name="UserName" oninput="value=value.replace(/[^\w\.\/]/ig,'')" onblur="CheckUserNameIsExits()">
Prompt in placeholder that only numbers or letters are allowed, maxlength is limited to 25 digits, require is a required item, autofoucus automatically focuses on the user name, detects input events, and replaces unmatched values with regular expressions
Then there is the interface that requests to detect whether the username exists, and the js method of CheckUserNameIsExits is called when the focus is lost
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("")
}
})
}
Since the project does not use bootstrap, nor does it use any validation plug-ins, and I don't want to build a wheel, I use the form validation that comes with html5. Although the built-in one is not very beautiful, it is acceptable.
setCustomValidity can be used to display custom error messages and automatically prevent form submission. When the information is empty, it is considered to be validated. Note that setCustomValidity cannot be triggered by elements obtained by jquery's element selector. It seems that only documents can be used to obtain elements. trigger
Since I have loaded jquery in the front, I can directly use get's ajax to submit, if not, write my own smelly and long ajax submission.
The next step is to verify the password
<input type="password" id="password" placeholder="密码" maxlength="25" required minlength="6"
name="Password" oninput="if(value.length>5)CheckPassword()">
Similarly, I gave a minimum and maximum length limit, and only called CheckPassword for detection when the length of the input value is greater than 5.
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("密码格式不正确")
}
}
}
Since the password verification is a bit more complicated, I repackaged it
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("") is the same detection of user name reversal, /^\d+$/.test(Password) number detection, /^[az]+$/i.test (Password) letter detection, !/^[A-Za-z0-9]+$/.test(Password) non-alphanumeric detection, and then detection of weak passwords, because there are too many forms of weak passwords, only handwritten arrays
In this way, the html5 native form detection is completed. Of course, the front-end detection can only prevent the gentleman, but not the villain. If the security requirements are slightly higher, the value submitted by the user must be detected at the backend. However, this is not what this article should say. category