JavaScript Authentication API
Constraint Validation DOM Method
Property | Description |
---|---|
checkValidity() | If the data in the input element is legal, return true, otherwise return false. |
setCustomValidity() | Set the validationMessage attribute of the input element to customize the error message method. After setting the custom prompt with setCustomValidity, validity.customError will become true, and checkValidity will always return false. If you want to re-judge and need to cancel the custom prompt, the method is as follows: setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined) |
If the input information is illegal in the following example, an error message will be returned:
checkValidity() Method
<input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">Verify</button> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (inpObj.checkValidity() == false) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } } </script>
Constraint Validation DOM Attributes
Attributes | Description |
---|---|
validity | Boolean attribute value, returns whether the input value is legal |
validationMessage | Browser error message |
willValidate | Specify whether the input needs to be validated |
Validity Property
The validity attributes of the input element contains a series of data attributes about validity:
Attribute | Description |
---|---|
customError | Set to true, if custom validity information is set. |
patternMismatch | Set to true, if the value of the element does not match its pattern attribute. |
rangeOverflow | Set to true, if the value of the element is greater than the set maximum value. |
rangeUnderflow | Set to true, if the value of the element is less than its minimum value. |
stepMismatch | Set to true, if the value of the element is not set according to the specified step attribute. |
tooLong | Set to true, if the value of the element exceeds the length set by the maxLength attribute. |
typeMismatch | Set to true, if the value of the element is not the expected matching type. |
valueMissing | Set to true if the element (required attribute) has no value. |
valid | Set to true if the value of the element is legal. |
Example
If the entered value is greater than 100, a message is displayed:
rangeOverflow Attribute
<input id="id1" type="number" max="100"> <button onclick="myFunction()">Verify</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeOverflow) { txt = "The value entered is too large"; } document.getElementById("demo").innerHTML = txt; } </script>
If the entered value is less than 100, a message is displayed:
rangeUnderflow Attribute
<input id="id1" type="number" min="100" required> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; var inpObj = document.getElementById("id1"); if(!isNumeric(inpObj.value)) { txt = "What you entered is not a number"; } else if (inpObj.validity.rangeUnderflow) { txt = "The entered value is too small"; } else { txt = "Entered correctly"; } document.getElementById("demo").innerHTML = txt; } // Determine whether the input is a number function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } </script>