Home  >  Article  >  Web Front-end  >  Javascript form validation-uncovering regular expressions_javascript skills

Javascript form validation-uncovering regular expressions_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:10:101624browse

Recommended reading: Javascript form validation length

Javascript form validation-submit form

Javascript form validation - first introduction to regular expressions

In the previous article, I introduced you to Javascript form validation - first introduction to regular expressions. This article introduces to you Javascript form validation - unveiling the veil of regular expressions. Please read the full text for details. .

Use metacharacters to match the corresponding character type

Creating a regular expression is a bit like creating a string literal, except that the regular expression appears within a pair of "/"

First-level metacharacters are used in regular expressions to connect letters and numbers

"." matches any character, except newline

"d" matches any numeric character

"w" matches any alphabetic or numeric character

"s" matches spaces

The "^" string must start with a pattern

The "$" string needs to end with a pattern

The

metacharacter not only represents a literal character, it is a symbol used to construct regular expressions

Example: There are three characters here

"A","7","%"

/w/ can match "A", "7"

/^d/ can match "7"

/d/ can match "7"

/./ can match "A", "7", "%"

But what about strings containing multiple characters?

"2nite","007","catch22",

/^d/ can match "2nite", "007" (all starting with numbers)

/ddd/ matches "007" (3 numbers in a line)

/^cat/ can match "catch22" (starting with cat character)

/dd$/ matches "catch22" (must end with two numbers)

For example: Matching the US zip code, the zip code format is #####-####

/^ddddd-dddd$/

Use qualifiers to specify the number of occurrences of a character

The qualifier is used to control the number of times the subpattern appears in the regular expression

The qualifier is preceded by a sub-pattern, and the qualifier is applied to the sub-pattern and controls the number of times the sub-pattern appears in the pattern

The subpattern before the "*" qualifier must appear 0 or more times

The subpattern before the "+" qualifier must appear 1 or more times

The subpattern before the "?" qualifier must appear 0 or 1 times

The subpattern before the "{n}" qualifier must appear exactly N times

“()” collects characters or/and metacharacters to become a subpattern

Also using postal code as an example

/^d{5}-d{4}$/

It can be seen that the expression with qualifiers is more accurate than the expression with only metacharacters

/w*/ matches any alphanumeric character, including the empty string

/.+/ Matches a string that appears more than once (used to match non-non-empty strings)

/(Hot)??Donuts/ can match Hot or Donuts

*When you want to match characters with special meaning in regular expressions, you can use backslash

For example, match $:$*

Use regular expressions to verify data

Regular expressions in JavaScript are represented by RegExp objects, which contain the key to using regular expressions to verify data – the test() method, which checks whether the specified pattern exists in the string

Example:

Copy code The code is as follows:

var regex=/^d{5}$/;//Regular expression matching 5-digit postal code;

Regular expression object literals automatically build RegExp objects

if(!regex.test(inputFiled.value)) 
{ 
//在正则表达式上调用text方法 
//如果符合合正则表达式的要求,返回true 
//如果不符合正则表达式的要求,返回false 
}

Code Example

Next, write a method specifically used to verify the string format

//regex正则表达式
//inputStr需要验证的字符串
//helpText提供信息提示的一个span标签
//helpMessage提示信息内容
//
function validateRegExp(regex,inputStr,helpText,helpMessage)
{
if(!regex.test(inputStr))
{
if(helpText!=null)
helpText.innerHTML=helpMessage;
return false;
}
else{
if(helpText!=null)
helpText.innerHTML="";
}
return true;
}
function validateDate(inputFild,helpText)
{
if(!validateNonEmpty(inputFild,helpText)//先检查参数是非空的
{
return false;
}
return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法
}

Okay, this article ends here. Thank you everyone for supporting the Script House website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn