HTML forms and validation events

1. Form verification

(1). Non-empty verification (remove spaces)

(2). Comparison verification (compare with a value)

(3). Range verification (judgment based on a range)

(4). Fixed format verification: verification of phone number, ID number, email, credit card number, etc.; regular expressions are required for verification.

(5).Other verification

2, regular expression

Use symbols to describe writing rules:/ Write regular expressions in the middle /

^: matches the beginning, $: matches the end; /^ve/begins with ve /ve$/ends with ve

d: an arbitrary number

w: an arbitrary number or letter

s: an arbitrary string

{n}: Repeat the expression on the left n times

{m,n}: Repeat the expression on the left at least m times, and at most n times
{m, }: Repeat the expression on the left at least m times, and at most no limit

+: The expression on the left appears at least once and at most unlimited, equivalent to {1,}

*: The expression on the left appears at least 0 times and at most no limit, equivalent to {0,}

?: The expression on the left appears at least 0 times and at most 1 time, which is equivalent to {0, 1}

[a,b,c]: can only take one of the contents in square brackets

[a-z] or [1-9]: choose one in the range

|: represents or; (): priority; : escaping--"( )" is the parentheses to appear and needs to be escaped

3, event

An event has three elements: event source, event data, and event handler

You can add return false; to prevent the default operation

onclick: Triggered by mouse click

ondblclick: Double click trigger

onmouseover: Triggered when the mouse moves above

onmouseout: Triggered when the mouse leaves

onmousemove: Triggered when the mouse moves over it

onchange: Triggered whenever the content changes

onblur: triggered when focus is lost

onfocus: Triggered when focus is obtained

onkeydown: Triggered when the key is pressed

onkeyup: Triggered when the button is lifted

onkeypress: event occurs when the user presses and releases any alphanumeric key. But system buttons (e.g. arrow keys, function keys) are not recognized.

Example: Verify email based on regular expression

function checkemail() { var v4 = trim(u4.value); var reg = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+) *$/; if(v4.match(reg) != null) { imgs4.setAttribute("src","imges/1.png"); return true; } else imgs4.setAttribute("src","imges /2.png"); return false; } }

Regular expression supplement:

How to create regular expressions:

var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);/*RegExp()The formulas in the brackets need to be defined by yourself:

1、[]There is only one element in it

2, ()You can write a word or formula inside 3, {} which represents the quantity
4, ^: Start with a certain element and write it in Before the element
5, $: ends with a certain element, written after the element */

Example:

1, Regular expression verification ID card:

ID card:

/*javascriptPart*/​

var a= document.getElementById("1").value; var pattern= new RegExp(/^[0-9]{17}[0-9|X]$/);

if(patten.test(a))

{ alert("The input is correct"); }

else

{ alert("Input error"); }

2, Regular expression verification email:

Email: Submit" onclick="mail()" />

function mail()

{

var pattern2= new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/)

var mail = document.getElementById("2").value;

if(patten2.test(mail))

{         alert(" entered correctly");      }

else

{ alert("Input error"); }

}

Commonly used regular expressions:

号 Matching domestic phone number:

d {3} -d {8} | d {4} -d {7} Comments: matching forms such as 0511-4405222
or 021-8788822 match Tencent QQ
number: [1-9][0-9]{4,} Comment: Tencent QQ
number starts from 10000 Matches Chinese postal code: [1- 9]d{5}(?!d)
Comment: China’s postal code is 6
digits Matching ID card: d{15}|d{18}
Comment: China’s ID card is 15
bits or 18bits Match ip
address: d+.d+.d+.d+ Comment: Useful when extracting ip
address Match specific numbers:
^[1-9]d*$                                                                                  Integer ^[1-9]d*|0$ //
matches non-negative integers (positive integers+ 0
)
^-[1-9]d*|0$ //matches non-negative integers Positive integer (negative integer
+ 0) ^[1-9]d*.d*|0.d*[1-9]d*$ //Match positive floating point number
^-( [1-9]d*.d*|0.d*[1-9]d*)$ //Match negative floating point numbers ^-?([1-9]d*.d*|0. d*[1-9]d*|0?.0+|0)$ //Match floating point numbers ^[1-9]d*.d*|0.d*[1-9]d* |0?.0+|0$ //
Match non-negative floating point numbers (positive floating point numbers+ 0
)
^(-([1-9]d*.d*|0.d*[ 1-9]d*))|0?.0+|0$ //Match non-positive floating point numbers (negative floating point numbers
+ 0) Comments: Useful when processing large amounts of data, specific applications Note the correction
Match specific strings: ^[A-Za-z]+$ // Match a string consisting of 26
English letters
^[A-Z]+$ // Matches a string consisting of
26 uppercase letters of English letters ^[a-z]+$^[A-Za-z0-9]+$ //matches a string consisting of numbers and 26 English letters
^w+$ //matches a string consisting of numbers, 26 A string consisting of letters or underscores
The verification function and its verification expression when using the RegularExpressionValidatorvalidation control are introduced as follows:
Only numbers can be entered: "^[0-9]*$"
        Only ndigits can be entered: “^d{n}$”  
    Only at least ndigits can be entered: “^d{n,}$”  
  Only Numbers that can be entered with m-n digits: “^d{m,n}$”
Only numbers starting with zero and non-zero can be entered: “^(0|[1-9][0-9 ]*)$”
You can only enter positive real numbers with two decimal places: “^[0-9]+(.[0-9]{2})?$”
You can only enter 1- Positive real numbers with 3 decimal places: “^[0-9]+(.[0-9]{1,3})?$”
Only non-zero positive integers can be entered: “^+ ?[1-9][0-9]*$”
Only non-zero negative integers can be entered: “^-[1-9][0-9]*$”
Only the length of can be entered 3 characters: "^.{3}$"
You can only enter a string consisting of 26 English letters: "^[A-Za-z]+$"
You can only enter a string consisting 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 consisting of numbers and 26 English letters: “^[A-Za-z0-9]+$”
You can only enter a string consisting of numbers, A string of 26 English letters or underscores: “^w+$”
Verify user password: “^[a-zA-Z]w{5,17}$”The correct format is: It starts with a letter and has a length between 6-18.
can only contain characters, numbers and underscores.
Verify whether it contains characters such as ^%&'',;=?$": "[^%&'',;=?$x22]+"
Only Chinese characters can be entered: " ^[u4e00-u9fa5],{0,}$”
VerificationEmailAddress: “^w+[-+.]w+)*@w+([-.]w+)*.w+([-. ]w+)*$”​
VerificationInternetURL: “^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
Verification phone number 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 (15digits or 18digits): “^d{15}|d{}18$”
Verify 12months of one year: "^(0?[1-9]|1[0-2])$"The correct format is: "01"-"09" and "1" "12"​
Verify the 31day of a month: “^((0?[1-9])|((1|2)[0-9])|30|31)$”
The correct format is : "01" "09" and "1" "31" .
Regular expression matching Chinese characters: [u4e00-u9fa5]
Matches double-byte characters (including Chinese characters ) : [^x00-xff] matches empty Regular expression for line:
n[s| ]*r Regular expression for matching
HTML tag: /<(.*)>.*|<(.*) />/ Regular expression matching leading and trailing spaces:
(^s*)|(s*$) Regular expression matching
Email address: w+([-+.]w+)*@w+( [-.]w+)*.w+([-.]w+)* Regular expression matching URL
URL: http://([w-]+.)+[w-]+( /[w- ./?%&=]*)?