Form Verification, validform
Script to verify the user name and password
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> Form Verification </title>
<Script type = "text/javascript">
/**
* Detect users
* @ Param obj
*/
Var checkName = function (obj ){
// 1. obtain user input
Var value = obj. value;
// 2. Define a regular expression
Var reg =/^ \ s * $ /;
// 3. Get span
Var span = document. getElementById ('s1 ');
Span. innerHTML = "";
If (reg. test (value )){
Span. innerHTML = 'user name cannot be blank ';
Span. className = 'error ';
Return false;
}
Return true;
}
Var checkPwd = function (){
// 1. Obtain the password
Var pwd = document. forms [0] ['pwd'];
Var reg =/^ \ s * $ /;
Var span = document. getElementById ('s2 ');
Span. innerHTML = '';
If (reg. test (pwd. value )){
Span. innerHTML = 'password cannot be blank ';
Span. className = 'error ';
Return false;
}
If (pwd. value. length <6 ){
Span. innerHTML = 'password length cannot be less than 6 characters ';
Span. className = 'error ';
Return false;
}
Return true;
}
// Duplicate password verification
Var checkRepwd = function (){
// 1. Obtain the object
Var repwd = document. forms [0] ['re1'];
// 2. Obtain the first Password
Var pwdValue = document. forms [0] ['pwd']. value;
Var span = document. getElementById ('s3 ');
Span. innerHTML = '';
If (repwd. value! = PwdValue ){
Span. innerHTML = 'inconsistent passwords ';
Span. className = 'error ';
Return false;
}
Span. innerHTML = 'OK ';
Span. className = 'info ';
Return true;
}
/*
* Display information
*/
Var showInfo = function (obj ){
// 3. Get span
If (obj. name = 'username '){
Var span = document. getElementById ('s1 ');
Span. innerHTML = 'username required ';
Span. className = 'info ';
}
If (obj. name = 'pwd '){
Var span = document. getElementById ('s2 ');
Span. innerHTML = 'password length cannot be less than 6 characters! ';
Span. className = 'info ';
}
}
/*
* Form verification before submission
*/
Var checkForm = function (){
// 1. Provide the id value document. getElmentById () for input ();
// 2. Get tbody, tbody. getElementsByTagName ('input ');
// Document. forms: All form objects in the document can be obtained.
// Documents. forms [0] [name | id]
Var nameInput = document. forms [0] ['username'];
Console. log (nameInput );
Return checkName (nameInput) & checkPwd () & checkRepwd ();
}
</Script>
<Style type = "text/css">
. Error {
Color: red;
}
. Info {
Color: green;
}
# Tb1 {
Margin-left: auto;
Margin-right: auto;
Border: 1px solid black;
Width: 500px;
Height: auto;
}
# Tb1 tr: last-child {
Text-align: center;
}
P {
Text-align: center;
}
. Show {
Width: 200px;
Text-align: left;
}
</Style>
</Head>
<Body>
<P> User Registration </p>
<Form action = "#" method = "get" onsubmit = "return checkForm ();">
<Table id = "tb1">
<Tr>
<Td> User Name </td>
<Td>
<Input type = "text" name = "username" onfocus = "showInfo (this);" onblur = "checkName (this);"/>
</Td>
<Td class = "show">
<Span id = "s1"> </span>
</Td>
</Tr>
<Tr>
<Td> password </td>
<Td>
<Input type = "password" name = "pwd" onblur = "checkPwd ();" onfocus = "showInfo (this);"/>
</Td>
<Td class = "show">
<Span id = "s2"> </span>
</Td>
</Tr>
<Tr>
<Td> password duplication </td>
<Td>
<Input type = "password" id = "re1" onblur = "checkRepwd ();"/>
</Td>
<Td class = "show">
<Span id = "s3"> </span>
</Td>
</Tr>
<Tr>
<Td colspan = "3">
<Input type = "reset" value = "reset"/>
<Input type = "submit" value = "submit"/>
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
