Simple JS Form validation function _ form effects

Source: Internet
Author: User
Tags html tags lowercase numeric value pow trim
The function of form verification is very common in the production of Web site.


Sometimes, with some molding JS control will be more convenient, but too large and difficult to maintain (my JS level is not high)


So I simply wrote one myself. As for good, flexible and not flexible, but also please advise (first picture, very difficult to see, please do not mind):








Code:

Copy Code code as follows:



Form Validation JS Code

var FV =


{


Lang: "ZH-CN",//Error prompt language


INVALIDEDSTR: "=",//initial random copy, so that its length is not 0


Mail:function (ElementID)//Verify the email address is valid, ElementID is the ID of the Input text entry box


{


if (ElementID = = null) {return true;}


Else


{


var reg =/^[\w-]+ (\.[ \w-]+) *@[\w-]+ (\.[ \w-]+) +$/;


if (reg.test document.getElementById (elementid). Value)


{


Fv.invalidedstr = Fv.inValidedStr.replace (/mail/g, "");


Fv.invalidedstr = fv.inValidedStr.replace ("=", "");


Validmsg (Fv.lang, "Mail", "Mailinfo");


}


Else


{


Fv.invalidedstr = Fv.invalidedstr + "Mail";


ErrorMsg (Fv.lang, "Mail", "Mailinfo");


}


}


},


Username:function (ElementID)//Verify username legal alphanumeric underline, length 6-20


{


if (ElementID = = null) {return true;}


Else


{


var reg =/^[a-za-z0-9_]{5,19}$/;


if (reg.test document.getElementById (elementid). Value)


{


Fv.invalidedstr = Fv.inValidedStr.replace (/username/g, "");


Fv.invalidedstr = fv.inValidedStr.replace ("=", "");


Validmsg (Fv.lang, "username", "usernameinfo");


}


Else


{


Fv.invalidedstr = fv.invalidedstr + "username";


ErrorMsg (Fv.lang, "username", "usernameinfo");


}


}


},





//.... Additional validation can be added


Isvalid:function () {return (fv.inValidedStr.length = 0);}


};

The ID of the HTML unit elementid the information hint when the validation was successful
function validmsg (lang, ValueType, ElementID)
{
var msginfo = "";
var isCn = lang = "ZH-CN";

Switch (valuetype)


{


Case "Mail":


Msginfo = IsCn? "√ Address correct": "√the mail adress is valided";


Break


Case "username":


Msginfo = IsCn? "√ Success": "√the account valided";


Break


Case "Password":


Msginfo = IsCn? "√ Success": "√valided format!";


Break


//..... Corresponding increase in other cases


Default


Break


}


document.getElementById (elementid). InnerHTML = Msginfo;


document.getElementById (elementid). Style.color = "green";


}

Information when validation fails


function errormsg (lang, ValueType, ElementID)


{


var msginfo = "";


var isCn = lang = "ZH-CN";





Switch (valuetype)


{


Case "Mail":


Msginfo = IsCn? "X Please enter the correct email address": "XThe e-mail format is error,plz input right format. Eg. Abc@def.com. ";


Break


Case "username":


Msginfo = IsCn? "x length 6-20 characters, only for numbers, letters, underline composition": "XThe account just";


Break


Case "Password":


Msginfo = IsCn? "x password is ...": "Xinvalided format!";


Break


//.... Corresponding increase in other cases


Default


Break


}


document.getElementById (elementid). InnerHTML = Msginfo;


document.getElementById (elementid). Style.color = "Red";


}





Foreground code (ASPX page):


Copy Code code as follows:



Foreground aspx page code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

&lt;html xmlns= "http://www.w3.org/1999/xhtml" &gt;


&lt;head runat= "Server" &gt;


&lt;title&gt;&lt;/title&gt;


&lt;script type= "Text/javascript" src= "Common/js/formvalid.js" &gt;&lt;/script&gt;


&lt;/head&gt;


&lt;body&gt;


&lt;form id= "Form1" runat= "Server" &gt;


&lt;div&gt;


&lt;script type= "text/javascript" &gt;fv.lang = "en"/* if this row is removed, the default is the Chinese prompt */&lt;/script&gt;


&lt;input type= "text" name= "Mail" id= "Mail" onblur= "Fv.mail (' Mail ')"/&gt;&lt;span id= "Mailinfo" &gt;&lt;/span&gt; &lt;br/&gt;


&lt;asp:textbox id= "username" runat= "onblur=" fv.username (' username ') "&gt;&lt;/asp:textbox&gt;&lt;span id=" Usernameinfo "&gt;&lt;/span&gt;&lt;br/&gt;


&lt;input type= "Submit" onclick= "return Fv.isvalid ()" value= "Submit"/&gt;


&lt;/div&gt;


&lt;/form&gt;


&lt;/body&gt;


&lt;/html&gt;


Then, if you need additional validation, you can add it. Related Regular Expressions

Copy Code code as follows:



Matching regular expressions for Chinese characters: [U4E00-U9FA5]


Commentary: Matching Chinese is really a headache, with this expression will be easy to do


Match Double-byte characters (including Chinese characters): [^x00-xff]


Commentary: can be used to compute the length of a string (a double-byte character length meter 2,ascii 1 characters)


A regular expression that matches a blank row: ns*r


Commentary: can be used to delete blank lines


Regular expression:&lt; matching HTML tags (s*?) [^&gt;]*&gt;.*?| &lt; *? /&gt;


Commentary: The online version is too bad, the above can only match the part of the complex nested tags still powerless


A regular expression that matches the end-end whitespace character: ^s*|s*$


Commentary: A useful expression that can be used to delete white-space characters (including spaces, tabs, page breaks, and so on) at the end of a line at the beginning


Regular expression matching an email address: w+ ([-+.] w+) *@w+ ([-.] w+) *.w+ ([-.] w+) *


Commentary: Form validation is useful


Regular expressions that match URL URLs: [a-za-z]+://[^s]*


Commentary: Online circulation of the version of the function is very limited, which can meet the basic requirements


Match account number is legal (beginning of letter, allow 5-16 bytes, allow alphanumeric underline): ^[a-za-z][a-za-z0-9_]{4,15}$


Commentary: Form validation is useful


Match domestic phone number: D{3}-d{8}|d{4}-d{7}


Commentary: Match form such as 0511-4405222 or 021-87888822


Matching Tencent QQ Number: [1-9][0-9]{4,}


Commentary: Tencent QQ number starting from 10000


Match China ZIP Code: [1-9]d{5} (?! D


Commentary: China postal code is 6 digits


Matching ID: d{15}|d{18}


Commentary: China's ID card is 15-or 18-digit


Matching IP address: d+.d+.d+.d+


Commentary: Useful when extracting IP addresses

Match a specific number:


^[1-9]d*$//Matching positive integer


^-[1-9]d*$//matching negative integers


^-? [1-9]d*$//matching integer


^[1-9]d*|0$//matching nonnegative integer (positive integer + 0)


^-[1-9]d*|0$//matching non positive integer (negative integer + 0)


^[1-9]d*.d*|0.d*[1-9]d*$//matching positive floating-point numbers


^-([1-9]d*.d*|0.d*[1-9]d*) $//matching negative floating-point number


^-? ([1-9]d*.d*|0.d*[1-9]d*|0?. 0+|0) $//matching floating-point number


^[1-9]d*.d*|0.d*[1-9]d*|0? 0+|0$//matching nonnegative floating-point number (positive floating-point number + 0)


^ (-([1-9]d*.d*|0.d*[1-9]d*)) |? 0+|0$//matching non-positive floating-point numbers (negative floating-point number + 0)


Commentary: useful when dealing with large amounts of data, pay attention to corrections when applied


Match a specific string:


^[a-za-z]+$//Match a string of 26 English letters


^[a-z]+$//Match a string of 26 uppercase letters


^[a-z]+$//Match string consisting of 26 lowercase letters


^[a-za-z0-9]+$//Match a string of numbers and 26 English letters


^w+$//Match A string of numbers, 26 English letters, or underscores


The validation features and their validation expressions when using the RegularExpressionValidator validation control are described below:


Only numbers can be entered: "^[0-9]*$"


Only n digits can be entered: "^d{n}$"


You can enter at least n digits: "^d{n,}$"


Only m-n digits can be entered: "^d{m,n}$"


Only numbers beginning with 0 and not 0 can be entered: ^ (0|[ 1-9][0-9]*) $ "


You can only enter positive real numbers with two decimal digits: ^[0-9]+ (. [ 0-9]{2})? $ "


You can only enter positive real numbers with 1-3 decimal digits: ^[0-9]+ (. [ 0-9]{1,3})? $ "


You can only enter a Non-zero positive integer: "^+?" [1-9] [0-9]*$]


You can only enter a Non-zero negative integer: "^-[1-9][0-9]*$"


You can only enter characters with a length of 3: "^. {3}$ "


You can only enter a string of 26 English letters: "^[a-za-z]+$"


You can only enter a string of 26 uppercase English letters: "^[a-z]+$"


You can only enter a string consisting of 26 lowercase English letters: "^[a-z]+$"


You can only enter a string of numbers and 26 English letters: "^[a-za-z0-9]+$"


You can only enter a string of numbers, 26 English letters, or underscores: "^w+$"


Verify user password: "^[a-za-z]w{5,17}$" in the correct format: Beginning with the letter, length between 6-18,

Only characters, numbers, and underscores can be included.
Verify that it contains ^%& ',; =? foreground aspx page code <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

&lt;html xmlns= "http://www.w3.org/1999/xhtml" &gt;


&lt;head runat= "Server" &gt;


&lt;title&gt;&lt;/title&gt;


&lt;script type= "Text/javascript" src= "Common/js/formvalid.js" &gt;&lt;/script&gt;


&lt;/head&gt;


&lt;body&gt;


&lt;form id= "Form1" runat= "Server" &gt;


&lt;div&gt;


&lt;script type= "text/javascript" &gt;fv.lang = "en"/* if this row is removed, the default is the Chinese prompt */&lt;/script&gt;


&lt;input type= "text" name= "Mail" id= "Mail" onblur= "Fv.mail (' Mail ')"/&gt;&lt;span id= "Mailinfo" &gt;&lt;/span&gt; &lt;br/&gt;


&lt;asp:textbox id= "username" runat= "onblur=" fv.username (' username ') "&gt;&lt;/asp:textbox&gt;&lt;span id=" Usernameinfo "&gt;&lt;/span&gt;&lt;br/&gt;


&lt;input type= "Submit" onclick= "return Fv.isvalid ()" value= "Submit"/&gt;


&lt;/div&gt;


&lt;/form&gt;


&lt;/body&gt;


&lt;/html&gt;



Xxquot, etc characters: "[^%& ',; = $x 22]+"
Only Chinese characters can be entered: "^[u4e00-u9fa5],{0,}$"
Verify email Address: "^w+[-+." w+) *@w+ ([-.] w+) *.w+ ([-.] w+) *$ "
Verify InternetURL: "^http://([w-]+.) +[w-]+ (/[w-./?%&=]*)? $ "
Verify phone Number: "^ ((d{3,4}) |d{3,4}-)? d{7,8}$"

The correct format is: "Xxxx-xxxxxxx", "xxxx-xxxxxxxx", "xxx-xxxxxxx",

"Xxx-xxxxxxxx", "XXXXXXX", "XXXXXXXX".
Verify ID Number (15-bit or 18-digit): "^d{15}|d{}18$"
Verify 12 months of the year: "^" (0?[ 1-9]|1[0-2]) $ "The correct format is:" 01 "-" 09 "and" 1 "" 12 "
Verify one months of 31 days: "^ (0?[ 1-9]) | ((1|2) [0-9]) |30|31) $ "

The correct format is: "01" "09" and "1" "31".

Matching regular expressions for Chinese characters: [U4E00-U9FA5]


Match Double-byte characters (including Chinese characters): [^x00-xff]


A regular expression that matches a blank row: n[s|] *r


Regular expression matching HTML tags:/&lt; (. *) &gt;.*|&lt; (. *)/&gt;/


Matching a regular expression with a trailing space: (^s*) | (s*$)


Regular expression matching an email address: w+ ([-+.] w+) *@w+ ([-.] w+) *.w+ ([-.] w+) *


A regular expression that matches URL URLs: http://([w-]+.) +[w-]+ (/[w-/?%&amp;=]*)?


(1) Application: Computes the length of the string (a double-byte character length meter 2,ascii character count 1)


String.prototype.len=function () {return This.replace ([^x00-xff]/g, "AA"). Length;}


(2) Application: JavaScript does not have a trim function like VBScript, we can use this expression to implement


String.prototype.trim = function ()


{


Return This.replace (/(^s*) | ( s*$)/g, "");


}


(3) Application: The use of regular expressions to decompose and transform IP addresses


function IP2V (IP)//IP address to corresponding numeric value


{


re=/(d+). (d+). (d+). (d+)/g//matching the regular expression of the IP address


if (Re.test (IP))


{


Return Regexp.$1*math.pow (255,3)) +regexp.$2*math.pow (255,2)) +regexp.$3*255+regexp.$4*1


}


Else


{


throw new Error ("not a valid IP address!")


}


}


(4) Application: JavaScript program to extract filename from URL address


S= "http://www.jb51.net/page1.htm";


S=s.replace (/. * *) {0,} ([^.] +). */ig, "$"); Page1.htm


(5) Application: Using regular expressions to restrict the input of text boxes in Web Forms


Only Chinese can be entered with regular expression restrictions: onkeyup= "value="/blog/value.replace (/["^u4e00-u9fa5]/g," "onbeforepaste=") clipboarddata.setdata (' Text ', Clipboarddata.getdata (' text '). Replace (/[^u4e00-u9fa5]/g, ') "


Only full-width characters can be entered with regular expression restrictions: onkeyup= "value="/blog/value.replace (/["^uff00-uffff]/g," "onbeforepaste=") Clipboarddata.setdata (' Text ', Clipboarddata.getdata (' text '). Replace (/[^uff00-uffff]/g, ') "


Only numbers can be entered with regular expression restrictions: onkeyup= "value="/blog/value.replace (/["^d]/g," "Onbeforepaste=" Clipboarddata.setdata) (' Text ', Clipboarddata.getdata (' text '). Replace (/[^d]/g, ') "


Only numbers and English can be entered with regular expression restrictions: onkeyup= "value="/blog/value.replace (/[w]/g, "'") "onbeforepaste=" Clipboarddata.setdata (' text ', Clipboarddata.getdata (' text '). Replace (/[^d]/g, "


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.