一.拖拽边界判断
//拖拽边界判断
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;
}
}二.正则表达式
①正则表达式的概念
:字符串产正确的规则
②正则表达式的作用
：前后端往往有大量的数据进行交互，正则表达式可以实现前端数据格式的校验,从而大大降低服务器压力，提高程序效率
③正则表达式的定义
a.构造方法
var reg = new RegExp('格式控制字符串','修饰符');
var reg = new RegExp('a');//判断目标字符串是否至少包含一个ab.字面量
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
功能:判断目标字符串是否满足正则对象的格式
参数:test(目标字符串)
返回值:布尔值
console.log(reg.test(“bbbb”));
④正则的各种符号
格式控制字符串:a.普通字符b.特殊字符（1.单个字符 2.组合字符串3.各种括号）
a.单个字符:
^：正则开始
$ : 正则结束
. : 元字符, 表示任意一个字符
\. : 表示转义字符 \.表示.
+： 表示其前面紧挨着的字符至少出现1次 等价{1,}
* ：表示其前面出现的字符至少出现过0次 等价{0,}
?: 表示其前面出现的字符至少出现过0次，至多1次 等价{0,1}
| : 表示或者
b.组合字符:
\d : 0-9之间的任意一个数字 \d只占一个位置
\D : 除了\d
\w : 数字，字母 ，下划线 0-9 a-z A-Z _
\W : 除了\w
\s : 空格或者空白等
\S : 除了\s
c.括号:
{m,n}表示括号前面紧挨着的字符至少出现m个 至多出现n个
( : 以b开头 至少3个a 至多5个a /^ba{3,5}&/)
{m}表示括号前面紧挨着的字符只能出现m个
{m,}表示括号前面紧挨着的字符至少出现m个
[ ] 表示括号内的任意一个字符
[a-z]表示任意一个小写字母 [a-zA-Z0-9]
[^ ]表示非括号内的任意一个字符
( )一般与或连用 表示优先级
[\u4e00-\u9fa5] 任意一个中文字符
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));
}课堂练习
//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;
}
}