js Chiang Kai-shek related summary, realize drag effect of the interface usage

1, the regular expression object

What is a regular: the legitimacy of the rules for the regular user to input data specification of
regular expressions: the
ordinary characters and special characters
special characters: with the meanings specified
regular expression is defined: regular expression object RegExp

   var reg = /正则表达式/修饰符;  

Special characters:

Single characters:
^ start of the regular
$ regularization end
| representation or generally () in conjunction
represent any one character.
\ Represents the escape has a specific meaning in the regular characters turn into intent decimal point.

Classifiers:
+ equivalent {1} which is the immediately preceding character appears at least once
? {0, 1} which is equivalent to the immediately preceding character occurrence 0 or 1

  • Equivalent to {0,} which is the immediately preceding character appears at least once 0

A combination of characters:
\ D: represents any character between 0-9
or 0 |. 1 | 2 |. 3 |. 4 |. 5 |. 6 |. 7 |. 8 |. 9, [0123456789], [0-9]
\ D: represents non-numeric
\ w: represents any word characters (numbers of any or a letter or underscore one)
\ W is: represents any non-word character (except numbers, letters, underline any)
\ S: represents any space character
\ S: represents any non-whitespace character

Represents a specific meaning in brackets:
{} represents the range of
{m} m> 0 indicates that the immediately preceding character can appear m times
{m, n} m, n is greater than 0 indicates that the immediately preceding character appears at least m times occur at most n times
{m,} m> 0 indicates that the immediately preceding character appears at least m
[] represents any character in parentheses represent any of a Chinese [\ u4e00- \ u9fa5]
[358] brackets represent or 3 or 5 or. 8
[AZ] represents any one lowercase letter
[^] represents any in the non-bracketed character
[^ 358] represents a non-braces or 3 or 5 or. 8
[^ AZ] means that, in lower case letters
() represents the highest priority in general and | conjunction

Modifiers:
i represents a case insensitive
g represents global find
Regular Code Comments
2, form validation,
need to submit a form to complete onsubmit event by
event needs to be added to the form tag
Application form to achieve verification of user name and password
Application form to achieve verification of user name and password

3, the canonical correlation method (refer to the manual document js) (following five methods can operate regular expressions)

Regular expressions related methods:
the Test () to verify compliance with a string of one regular specification, returns true if met, false otherwise
Usage: reg.test (str)

exec () based on regular expression search, the results will return an array of length 1 (only one array value) return null not found

用法: reg.exec(str);

The method is positive in the string (the regular expression can be operated):

search method returns the regular expression matching to find a first location content substring. Can not find returns -1 (indexOf ())
Usage: str.search (reg);


match() 方法 使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。
用法: str.match(reg)


str.replace(原字符串,新字符串) 第二个参数可以是一个函数( 不是es5以下的版本功能,而是es6版本中新增功能 )

replace() 通过正则表达式替换,返回结果 是原字符串被替换后的新字符串

用法: str.replace(正则表达式,要替换的新字符串) 如果想实现全局替换,在正则表达式上加一个修饰符 g

修饰符 :
i 不区分大小写
g 全局查找
Regular use of global

4、拖拽
拖拽思路 :
第一步 : 鼠标按下事件 onmousedown
记录鼠标距离按下的元素的内部偏移量

disx = e.offsetX  ||  e.layerX
disy - e.offsetY  ||   e.layerY

第二步 : 鼠标移动事件 onmousemove
设置拖拽元素的left值 和 top值

left = e.pageX - disx
top = e.pageY - disy

第三步 : 鼠标抬起事件 onmouseup
取消移动和按下

document.onmousemove = null;  或 ""

边界处理
获取可视窗口的宽度和高度
宽度 window.innerWidth document.documentElement.clientWidth
高度 window.innerHeightdocument.documentElement.clientHeight(offsetWidth /offsetHeight不可以使用)

扩展 : 取消拖拽时的文字选中状态
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
Detailed realize drag effect of the code 1
Detailed realize drag effect of the code 2

练习:根据描述写出正则表达式:

只能用数字开头,长度在6–18位之间
/^KaTeX parse error: Expected 'EOF', got '\d' at position 5: / \̲d̲:0-9任意一个数 .任…/
以字母开头,数字结尾,中间任意一个字符
[a-zA-Z] 任意一位字母 .任意字符 \d 任意一位数字
/^ [a-zA-Z].\d / dense code Do not can less to 6 Place of word symbol / . 6 , / 密码不能少于6位的字符 /^.{6,} /
变量的命名正则表达式(不能用数字开头 由字母、数字、下划线 、$组成)
/^ a-ZA-Z $_$/
以010开头的座机号(后面是8位数字)
/^010-\d{8} $/
手机号以13开头,以8结尾
/^13\d{8}8 $/
密码只能用6个

* 表达*的原意
/^*{6} $/

第一位是数字,第二位是A或a,后面至多出现6个字符
/^\d[aA].{0,6}$/

The first one is a number, the second digit is any character, followed by only letters, numbers, underscores, a total of eight
/^\d.\w{6}$/

Write Chinese name regular 2-4 Chinese [\ u4e00- \ u9fa5]
/ ^ [\ u4e00- \ u9fa5] {2, 4} $ /

Write a number qq regular, at least 5 up to 12 digits
/ ^ [1-9] \ d { 4,11} $ /

Test 6 digit zip code the first bit is not 0
/ ^ [1-9] \ {D} $. 5 /

Test compressed xxx.zip xxx.rar or three or xxx.tar format
/^\w+.(zip|rar|tar)$/

E-mail (before and after the @ sign to use the word character)

/^\w+@\w+(.\w+)+$/

Phone number 1 3 | 5 | 8 | 7

ID (18 might be considered a last X)
/ ^ [1-9] \ D {16} (\ D | X) $ /

Account names can only use alphanumeric underscore, not the beginning of a number, length between 6-18

// perfect drag
Perfect drag Detailed

Guess you like

Origin blog.csdn.net/ZHANGJIN9546/article/details/93157065