We want users to perform data verification when submitting data during website registration or submission. In this way, when users input incorrect data, we can directly verify the user data without the need for server processing, this not only saves traffic on servers, but also improves user experience.
Example
Add the onsubmit attribute to the form or the onclick attribute to the submit button. The value is return check (). check is a javascript function. It is used to verify the form. No return is used, it is submitted even if the verification fails. In the check function, false is returned for failed verification, and true is returned for successful verification.
Code:
| The Code is as follows: |
Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Body>
<Form action = "index. php" method = "get" name = "form1">
Name: <input type = "text" name = "name" id = "name"/> <br/>
Age: <input type = "text" name = "age" id = "age"/> <br/>
<Input type = "submit" onclick = "return check ()"/>
</Form>
<Script language = "javascript" type = "text/javascript">
Function check (){
Var age = parseInt (document. form1.age. value );
If (age <18 ){
Alert ("less than 18 ");
Return false;
} Else {
Return true;
}
}
</Script>
</Body>
</Html> |
Example 2
Use the jquery Form Verification plug-in validator
Simple calling and general style. You do not need to write any more styles. A very useful webpage form verification control.
Let's take a look at the effect, for example:
| The Code is as follows: |
Copy code |
<SCRIPT type = text/javascript src = "js/validator. js"> </SCRIPT>
<SCRIPT type = text/javascript>
Var a = validator ({
"Form": "validator-form ",
AjaxSubmit: true,
BeforSubmit: function (){
// Alert ("functions executed before form submission ");
},
AfterSubmit: function (){
Alert ("data returned after ajax is submitted:" + this. responseText );
}
}). Add ({
"Target": "username ",
"Rule_type": "username ",
'Action': '2. php ',
'Tids': 'What do you mean'
}). Add ({
"Target": "password ",
"Rule_type": "password"
}). Add ({
"Target": "confirm-password ",
"Rule_type": "password ",
"SameTo": "password ",
'Error': 'The password you entered is incorrect or different from the original password'
}). Add ({
"Target": "age ",
"Rule_type": "number | empty ",
"Error": 'Although this item is not mandatory, you can fill it out, right. '
}). Add ({
"Target": "birthday ",
"Rule_type": "date | empty"
}). Add ({
"Target": "id-card ",
"Rule_type": "idcard | empty"
}). Add ({
"Target": "email ",
"Rule_type": "email"
}). Add ({
"Target": "qq ",
"Rule_type": "qq | empty"
}). Add ({
"Target": "telephone ",
"Rule_type": "phone | empty"
}). Add ({
"Target": "mobile ",
"Rule_type": "mobile | empty"
}). Add ({
"Target": "phone ",
"Rule_type": "phone | mobile ",
"Tips": "Enter your phone number or landline phone number! "
}). Add ({
"Target": "zip-code ",
"Rule_type": "zip | empty"
}). Add ({
"Target": "ip-address ",
"Rule_type": "ip | empty"
}). Add ({
"Target": "url ",
"Rule_type": "url | empty"
}). Add ({
"Target": "message ",
"Rule_type": "require"
});
Var reset = document. getElementById ('reset ');
Var del = document. getElementById ('del ');
Reset. onclick = function (){
A. reset ();
}
Del. onclick = function (){
A. remove ('username ');
}
</SCRIPT>
|
