Common JS Form Verification Framework

Check. js function File
//////////////////////////////////////// ////////////////////////////////////////
/*
* --------------- Client form universal verification checkform (oform )-----------------
* Function: verifies all form elements.
* Usage:
* <Form name = "form1" onsubmit = "Return checkform (this)">
* <Input type = "text" name = "ID" Check = "^ \ s + $" Warning = "ID cannot be blank or contain spaces">
* <Input type = "Submit">
* </Form>
* Author: wanghr100 (Baby gray bean. Net)
* Email: wanghr100@126.com
* Update: 19: 28 2004-8-23
* Note: Be careful when writing regular expressions. Do not let "people with confidence" have loopholes.
* Implemented functions:
* Verify the validity of text, password, hidden, file, textarea, select, radio, and checkbox.
* Function to be implemented: Write the regular expression as a database.
* --------------- Client form universal verification checkform (oform )-----------------
*/
//////////////////////////////////////// ////////////////////////////////////////

// Main Function
Function checkform (oform)
{
VaR els = oform. elements;
// Traverse all Table Elements
For (VAR I = 0; I <els. length; I ++)
{
// Whether verification is required
If (ELS [I]. Check)
{
// Obtain the verified regular string
VaR sreg = els [I]. check;
// Obtain the value of the form, using a common value function
VaR sval = getvalue (ELS [I]);
// String-> regular expression, case insensitive
VaR Reg = new Regexp (sreg, "I ");
If (! Reg. Test (sval ))
{
// If the verification fails, the prompt "warning" appears.
Alert (ELS [I]. Warning );
// This form Element gets the focus and uses the universal return Function
Goback (ELS [I])
Return false;
}
}
}
}

// General value functions can be set to three types.
// Text input box. The value is El. value.
// Select one or more items and traverse all options to obtain the number of selected items. The returned result "00" indicates that two items are selected.
// Multiple single drop-down menus, traverse all options to obtain the number of selected results. "0" indicates that one
Function getvalue (EL)
{
// Obtain the type of the form Element
VaR stype = El. type;
Switch (stype)
{
Case "text ":
Case "hidden ":
Case "password ":
Case "file ":
Case "textarea": Return El. value;
Case "checkbox ":
Case "radio": Return getvaluechoose (EL );
Case "select-one ":
Case "select-multiple": Return getvaluesel (EL );
}
// Obtain the selected number of radio and checkbox. "0" is used to represent the selected number. When writing a regular expression, 0 {1,} can be used to represent the selected number.
Function getvaluechoose (EL)
{
VaR svalue = "";
// Retrieve the name of the first element and search for this element group
VaR tmpels = Document. getelementsbyname (El. Name );
For (VAR I = 0; I <tmpels. length; I ++)
{
If (tmpels [I]. Checked)
{
Svalue + = "0 ";
}
}
Return svalue;
}
// Obtain the select number. "0" is used to represent the selected number. When writing a regular expression, we can use 0 {1,} to represent the selected number.
Function getvaluesel (EL)
{
VaR svalue = "";
For (VAR I = 0; I <El. Options. length; I ++)
{
// In the single-choice drop-down box, the prompt option is set to value = ""
If (El. Options [I]. Selected & El. Options [I]. value! = "")
{
Svalue + = "0 ";
}
}
Return svalue;
}
}

// Universal return function, which is used to verify that the returned result is not passed. values can be set to three types.
// Text input box, with the cursor positioned at the end of the text input box
// Select multiple options, and the first option gets the focus
// Multiple single drop-down menus for focus
Function Goback (EL)
{
// Obtain the type of the form Element
VaR stype = El. type;
Switch (stype)
{
Case "text ":
Case "hidden ":
Case "password ":
Case "file ":
Case "textarea": El. Focus (); var RNG = El. createTextRange (); RNG. Collapse (false); RNG. Select ();
Case "checkbox ":
Case "radio": var els = Document. getelementsbyname (El. Name); els [0]. Focus ();
Case "select-one ":
Case "select-multiple": El. Focus ();
}
}

Demo.htm demo File

<Script language = "JavaScript" src = "check. js"> </SCRIPT>
Test common form functions:
<Form name = "form1" onsubmit = "Return checkform (this)">
Test: <input type = "text" name = "test"> not verified <br>
Account: <input type = "text" Check = "^ \ s + $" Warning = "the account cannot be blank, and cannot contain spaces "name =" ID "> cannot be blank <br>
Password: <input type = "password" Check = "\ s {6,}" Warning = "six or more passwords" name = "ID"> more than six <br>
Tel: <input type = "text" Check = "^ \ D + $" Warning = "the phone number contains invalid characters" name = "Number" value = ""> <br>
Upload a photo: <input type = "file" Check = "(. *)(\. JPG | \. BMP) $ "Warning =" the photo should be JPG, BMP format "name =" pic "value =" 1 "> <br>

Date of birth: <input type = "text" Check = "^ \ D {4} \-\ D {1, 2}-\ D {1, 2} $" Warning = "Date Format
Formula 2004-08-10 "name =" DT "value =" "> Date Format: 2004-08-10 <br>
Province:
<Select name = "Sel" Check = "^ 0 $" Warning = "select the province">
<Option value = ""> select
<Option value = "1"> Fujian
<Option value = "2"> Hubei Province
</SELECT>
<Br>
Select your favorite sports: <br>
Swimming <input type = "checkbox" name = "C" Check = "^ 0 {2,} $" Warning = "select 2 or more">
Basketball <input type = "checkbox" name = "C">
Football <input type = "checkbox" name = "C">
Volleyball <input type = "checkbox" name = "C">
<Br>
Your degree:
University <input type = "radio" name = "R" Check = "^ 0 $" Warning = "select a degree">
Middle school <input type = "radio" name = "R">
Elementary School <input type = "radio" name = "R">
<Br>
Personal introduction:
<Textarea name = "txts" Check = "^ [\ s | \ s] {20,} $" Warning = "personal description cannot be blank, more than 20 words </textarea>
<Input type = "Submit">
</Form>

Forms are inseparable from dynamic websites and other B/S-structured systems.
Form plays an important role as a carrier for the client to submit data to the server.
This raises a question: Is the submitted data legal? The question before us is to verify the data.
Ensure that the submitted data is valid. Therefore, we have written a large pile of verification functions. When we start a new
During project development, we have to write a lot of verification functions and then DEBUG these functions...

This article will introduce a method to improve the reusability of my code and improve our development efficiency.

In my opinion, Form Verification should contain two parts:
First, determine whether the data entered by the user is legal.
Second, it prompts you why your data is invalid.

Therefore, our common form verification function must implement the following functions:
First, get the user input data getvalue (EL)
Second, verify the user's data checkform (oform)
IE supports custom attributes, which is the basis for implementing this universal function.
We can add attributes that describe our own information on the form element, a bit like XML.
Check attribute: a regular expression used to store data validity.
Warning attribute: This attribute is used to store error message.
Third, the error message Goback (EL) is returned)
The trigger event of these three steps is onsubmit, remember to be return checkform (this)
If you make a mistake, all the work will be abandoned :)
<Form onsubmit = "Return checkform (this)">

Here, the overall framework comes out. Get the check attribute of the form element, get the string, and construct a regular expression. then verify the value. if the verification is passed, the request is submitted. If the data does not comply with the rules, the system obtains the warning attribute of the form element and generates a prompt message. and return to the form element. the entire framework is also relatively simple.
All we need to do is write a regular expression!

Next, let's analyze all the form elements.
Based on their commonalities, we divide them into three types
Each type of form has different features. Our goal is to write General.

1. text input box text
<Input type = "text" name = "TXT">
<Input type = "password" name = "PWD">
<Input type = "hidden" name = "hid">
<Input type = "file" name = "myfile">
<Textarea name = "txts"> </textarea>
2. Single-or multi-choice box choose
<Input type = "checkbox" name = "C">
<Input type = "checkbox" name = "C">
<Input type = "radio" name = "R">
<Input type = "radio" name = "R">
3. Select
<Select name = "Sel"> </SELECT>
<Select name = "sels" multiple> </SELECT>

A bunch of "principles" are too abstract and the code is more convincing!
Appendix:
Microsoft Windows Script technology. Here is an introduction to regular expressions.
Http://www.dqcn.net/net/CSDN/Book/SCRIPT56.chm
A good Regular Expression website that collects a lot of regular expressions.
Http://www.regexlib.com/Default.aspx

Reference announcement address:
Http://tmsoft.lsxy.com/trackback.php? Tbid = 179 & extra = 106488