1. Перетащите оценку границы
//拖拽边界判断
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. Регулярные выражения
① Концепция регулярных выражений
:string выдает правильное правило
②Роль регулярных выражений
: Front-end и back-end часто имеют много данных для взаимодействия, и регулярные выражения могут реализовать проверку формата данных front-end, тем самым значительно снижая нагрузку на сервер и повышая эффективность программы.
③Определение регулярных выражений
а. Метод построения
var reg = new RegExp('格式控制字符串','修饰符');
var reg = new RegExp('a');//判断目标字符串是否至少包含一个aб. Буквальный
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]);
с.тест
Функция: определить, соответствует ли целевая строка формату обычного объекта.
Параметры: test (целевая строка)
возвращаемое значение: логическое значение
console.log(reg.test("bbbb"));
④ Различные символы регулярности
Строка управления форматом: а. Общие символы б. Специальные символы (1. Отдельный символ 2. Комбинированная строка 3. Различные скобки)
А. Один символ:
^: обычный старт
$ : конец регулярного выражения
. : Метасимвол, представляющий любой символ
\. : Указывает escape-символ \. Указывает.
+: указывает, что символ непосредственно перед его появлением хотя бы один раз эквивалентен {1,}
* : Указывает, что предыдущий символ появился не менее 0 раз, что эквивалентно {0,}
?: Указывает, что предыдущий символ появлялся не менее 0 раз, и не более 1 раза эквивалентно {0,1}
|: означает или
б. Комбинированные символы:
\d : любое число от 0 до 9 \d занимает только одну позицию
\D : кроме \d
\w : цифры, буквы, подчеркивание 0-9 az AZ _
\W : кроме \w
\s : пробел или пробел и т. д.
\S : кроме \s
в. Скобки:
{m,n} указывает, что непосредственно перед скобками стоит не менее m и не более n символов.
( : начните с b не менее 3 a и не более 5 a /^ba{3,5}&/)
{m} указывает, что непосредственно перед скобками может стоять только m символов.
{m,} означает, что непосредственно перед скобками находится не менее m символов.
[ ] означает любой символ в скобках
[az] означает любую строчную букву [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;
}
}