1. Drag and drop boundary judgment
//拖拽边界判断
var oBox = document.querySelector("#box");
oBox.onmousedown = function(evt){
var e = evt || event;
var offsetX = e.offsetX;
var offsetY = e.offsetY;
document.onmousemove = function(evt){
var e = evt || event;
var x = e.pageX - offsetX;
var y = e.pageY - offsetY;
if(x < 0){
x = 0;
}
if(y < 0){
y = 0;
}
var maxLeft = window.innerWidth - oBox.offsetWidth;
if(x > maxLeft){
x = maxLeft;
}
var maxTop = window.innerHeight - oBox.offsetHeight;
if(y > maxTop){
y = maxTop;
}
oBox.style.left = x + "px";
oBox.style.top = y + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}2. Regular expressions
① The concept of regular expressions
:string produces the correct rule
②The role of regular expressions
: Front-end and back-end often have a lot of data to interact with, and regular expressions can realize the verification of front-end data format, thereby greatly reducing server pressure and improving program efficiency
③Definition of regular expression
a. Construction method
var reg = new RegExp('格式控制字符串','修饰符');
var reg = new RegExp('a');//判断目标字符串是否至少包含一个ab. Literal
var reg = /a/;//判断目标字符串是否至少包含一个a
console.log(reg.test("bbabb"));
//=====================================================
//必须使用构造方法的场景
var arr = ["heihei","haha","xixi"];
var reg = /arr[0]/;//这么写根本不是arr[0]数组元素的含义
// 解决方案
var reg = new RegExp(arr[0]);
c.test
Function: Determine whether the target string satisfies the format of the regular object
Parameters: test (target string)
return value: Boolean
console.log(reg.test("bbbb"));
④ Various symbols of regularity
Format control string: a. Common characters b. Special characters (1. Single character 2. Combined string 3. Various brackets)
a. A single character:
^: regular start
$ : end of regex
. : Metacharacter, representing any character
\. : Indicates the escape character \. Indicates.
+: Indicates that the character immediately before it appears at least once equivalent to {1,}
* : Indicates that the preceding character has appeared at least 0 times, equivalent to {0,}
?: Indicates that the preceding character has appeared at least 0 times, and at most 1 time is equivalent to {0,1}
| : means or
b. Combined characters:
\d : any number between 0-9 \d only occupies one position
\D : except \d
\w : numbers, letters, underscore 0-9 az AZ _
\W : except \w
\s : space or blank, etc.
\S : except \s
c. Brackets:
{m,n} indicates that at least m and at most n characters appear immediately before the brackets
( : start with b at least 3 a and at most 5 a /^ba{3,5}&/)
{m} indicates that only m characters can appear immediately before the brackets
{m,} means that there are at least m characters immediately before the brackets
[ ] means any character in brackets
[az] means any lowercase letter [a-zA-Z0-9]
[^ ] means any character that is not in brackets
( ) is generally used together with or to indicate priority
[\u4e00-\u9fa5] any Chinese character
oInput.onblur = function(){
//至少包含一个a
var reg = /a/;
//至少包含aaa,强调连续字符串的概念
reg = /aaa/;
//只能包含,要有都有，要没都没
// ^：正则开始
// $: 正则结束
//只能包含一个a
reg = /^ababa$/;
//以b开头 至少3个a 至多5个a
reg = /^ba{3,5}$/;
//6个5
reg = /^5{6}$/;
//邮编 6位数字
reg = /^\d{6}$/;
//定义一个由字母或数字或下划线组成的用户名,范围在6,18之间
reg = /^\w{6,18}$/;
//定义一个由字母或数字或下划线组成的用户名,范围在6,18之间
//但是首字母不能为数字
reg = /^\D\w{5,17}$/;
//定义一个密码 至少6位
reg = /^.{6,}$/;
//www.baidu.com
//: \转义字符,转义字符不能单独出现，一定和其他字符构成一个新的字符
reg = /www\.baidu\.com/;
//3+5
reg = /^3\+5$/;
//以 13 或 15 开头的手机号
//或 (字符串1|字符串2|字符串3...)
reg = /^1(3|5)\d{9}$/;
reg = /^(13|15)\d{9}$/;
//或 [(字符1字符2字符3...]
reg = /^1[35]\d{9}$/;
reg = /^[a-zA-Z3-5_]$/;
//空格
// reg = /^\s$/;
//除了 [^其他字符]
// reg = /^[^123abc]$/;
// [\u4e00-\u9fa5] 中文范围
// 两个中文
// reg = /^[\u4e00-\u9fa5]{2}$/;
console.log(reg.test(this.value));
}classroom exercises
//1.密码强弱判断
//由数字，字母，其他字符构成
var oInput = document.querySelector("input");
//至少包含
var regNum = /\d+/;
var regLetter = /[A-Za-z]+/;
var regChar = /[!@#$%]+/;
//只能
var _regNum = /^\d+$/;
var _regLetter = /^[A-Za-z]+$/;
var _regChar = /^[!@#$%]+$/;
oInput.onblur = function(){
if(regNum.test(this.value) && regLetter.test(this.value) &&
regChar.test(this.value)){
console.log("强");
}else if(_regNum.test(this.value) || _regLetter.test(this.value) ||
_regChar.test(this.value)){
console.log("弱");
}else{
console.log("中");
}
}
//2.表单验证强化
var oForm = document.querySelector("form");
var oInputs = document.querySelectorAll("input[type=text]");
var oSpans = document.getElementsByTagName("span");
var flagId = false;
var flagPwd = false;
oInputs[0].onblur = function(){
var regId = /^\w{6,18}$/;
if(regId.test(this.value)){
oSpans[0].innerHTML = "用户名格式正确";
flagId = true;
}else{
oSpans[0].innerHTML = "用户名格式错误";
flagId = false;
}
}
oInputs[1].onblur = function(){
var regPwd = /^.{6,}$/;
if(regPwd.test(this.value)){
oSpans[1].innerHTML = "密码格式正确";
flagPwd = true;
}else{
oSpans[1].innerHTML = "密码格式错误";
flagPwd = false;
}
}
oForm.onsubmit = function(){
if(flagId && flagPwd){
return true;
}else{
return false;
}
}