The related event is onSubmit, which is written on the form tag. When the verification passes, the data will be submitted and the page will jump. If the authentication fails, data is not submitted.

In this case, the data verified is whether the password is a six-digit pure number, if so, submit the data and jump to the page; If not, the following information is displayed:

Click on the link: 1833233.com/effect/subm…

The form is as follows:

<div class="user-name"> <span class="glyphicon glyphicon-user"></span> <span class="input-name"><input type="text" Placeholder ="username" name="username"></span> </div> <div class="user-password user-name"> <span class="glyphicon" Glyphicon-lock "></span> <span class="input-name"><input type="text" placeholder=" password" name="password" Class ="passwd-value"></span> </div> <div class="tip"> Please enter your six-digit password!! </div> <div class="user-identity user-name"> <input type="radio" name="identity" value="student" checked="true" /> student <input type="radio" name="identity" value="teacher" /> teacher <input type="radio" name="identity" value="administrator" /> Administrator </div> <div class="user-submit user-name"> <input type="submit" value=" login "class=" BTN btn-default" /> </div> </form>Copy the code

Onsubmit = “return myFunction()”; If the function returns true, it will not commit; MyFunction () reads as follows:

var infoValueNode = document.querySelector(".passwd-value"); var tipNode = document.querySelector(".tip"); var identityNode = document.querySelector(".user-identity"); function myFunction() { var value = infoValueNode.value; Console. log("value=", value); var reg = /^\d{6}$/; Var pattern = new RegExp(reg); // Create a RegEXP instance if (! Pattern. The test (value)) {/ / test method is to test whether the value value matches a regular expression infoValueNode. Style. The borderColor = "# F56C6C"; tipNode.style.display = "block"; identityNode.style.marginTop = "0px"; return false; } else { infoValueNode.style.borderColor = "#409eff"; tipNode.style.display = "none"; identityNode.style.marginTop = "21px"; } } </script>Copy the code