正则表达式, 表单验证

正则表达式

1.1 正则的概念和作用

`概念`：是js内置的一个对象
`作用`： 操作字符串。 验证，提取，替换等操作

1.2 正则表达式两种声明方式

 // 1. 通过js内置对象来声明
        var reg = new RegExp('正则语法')
        console.log(reg);

        // 2. 通过字面量形式 //
        var reg1 = /正则语法/
        console.log(reg1);

        // test(): 验证字符串是否满足正则表达式
        // 返回布尔值：满足 =》 true 不满足 =》 false

        console.log(reg1.test('这是一个正则123语法'));

// i : 忽略大小写
// g : 全局

1.3 正则表达式基础语法

 // 基本使用
var reg = /abc/

// console.log(reg.test('slkdfj')); //fasle
// console.log(reg.test('ababdca')); // false
// console.log(reg.test('abcabcccda')); // true

// []: 代表多选一
var reg = /[abc]/
// console.log(reg.test('slkdfj')); //fasle
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('a')); // true
// console.log(reg.test('abcabcccda')); // true

// -: 连字符： 起始位置-结束位置
var reg = /[a-z]/
// console.log(reg.test('slkdfj')); //true
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('a')); // true
// console.log(reg.test('abcabcccda')); // true
// console.log(reg.test('!A980')); // false

// [a-zA-Z0-9]: 匹配任意一个字母或数字
// [a-zA-Z0-9_]: 匹配任意一个字母或数字或_
var reg = /[a-zA-Z0-9]/
// console.log(reg.test('slkdfj')); //true
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('789')); // true
// console.log(reg.test('abcabcccda')); // true
// console.log(reg.test('!A980')); // false

// 中括号里面的尖尖：除了0-9以外的任意字符
var reg = /[^0-9]/
// console.log(reg.test('slkdfj')); //true
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('789')); // false
// console.log(reg.test('abcabcccda')); // true
// console.log(reg.test('!A980')); // true

// 限定符：中括号外面的^： 以什么开头
var reg = /^[0-9]/
// console.log(reg.test('1slkdfj')); //true
// console.log(reg.test('ababdca')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('abcabcccda')); // false
// console.log(reg.test('!A980')); // false

// 限定符：$: 以什么结尾
var reg = /[a-z]$/
// console.log(reg.test('1slkdfj')); //true
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('789')); // false
// console.log(reg.test('abcabcccda')); // true
// console.log(reg.test('!A980')); // false

// 注意：很多场景下，^和$需要一起使用: 仅能匹配任意一位字符
var reg = /^[0-9]$/
// console.log(reg.test('1slkdfj')); // false
// console.log(reg.test('ababdca')); // false
// console.log(reg.test('789')); // false
// console.log(reg.test('7')); // true

/* 
            量词：
                *： 匹配0次以上
                +： 匹配1次以上
                ?:  匹配0-1次
                {m}: 精准匹配m次
                {m,}: 精准匹配m次以上
                {m,n}: 精准匹配m-n次
        */

var reg = /^[0-9]*$/ // 精准匹配任意一个数字0次及以上
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('')); // true

var reg = /^[0-9]+$/
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('')); // false
// console.log(reg.test('7')); // true

var reg = /^[0-9]?$/
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // false
// console.log(reg.test('')); // true
// console.log(reg.test('7')); // true

var reg = /^[0-9]{3}$/ // 精准匹配任意数字3次
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('')); // false
// console.log(reg.test('7')); // false

var reg = /^[0-9]{3,}$/ // 精准匹配任意数字3次及以上
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('')); // false
// console.log(reg.test('790887')); // true

var reg = /^[0-9]{3,6}$/ // 精准匹配任意数字3次及以上
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('1234589')); // false
// console.log(reg.test('790887')); // true

/*
            特殊字符：
            \d: => [0-9]: 任一数字
            \D: 任一非数字
            \w: => [a-zA-Z0-9]
            \W: 字母数字以外的任一字符
            \: 转义符：=》 1. 将普通字符变成有特殊含义的字符； 2. 将有特殊含义的字符转换为普通字符
            .: 任一除了换行符之外的字符
            (): 代表优先级
            |：代表或者
            \任意数字： \1： 将第一个小括号的内容重复匹配一次； \2: 将第二个小括号的内容重复匹配一次
        */

var reg = /^abc|def$/ // 匹配以abc开头或者以def结尾的任意字符
// console.log(reg.test('abc'));
// console.log(reg.test('def'));
// console.log(reg.test('abcdef'));
// console.log(reg.test('aabcccdeef'));

var reg = /^(abc|def)$/ // 精准匹配abc或者def
// console.log(reg.test('abc'));
// console.log(reg.test('def'));
// console.log(reg.test('abcdef'));
// console.log(reg.test('aabcccdeef'));

var reg = /^ab(c|d)ef$/

// console.log(reg.test('abc'));
// console.log(reg.test('abd'));
// console.log(reg.test('abcdef'));
// console.log(reg.test('abcef')); true
// console.log(reg.test('abdef')); true

var reg = /^<(p|span)><\/\1>$/
console.log(reg.test('<p></p>')); // true
console.log(reg.test('<span></span>')); // true
console.log(reg.test('<p></span>')); // false

2.表单验证的时机和分类

# 表单验证的3个时机：
	1. 失去焦点的时候验证：onblur
    2. 边输入边验证： oninput
    3. 点击按钮验证： onclick
    
# 表单验证的两个分类：
	前端验证： 用户输入的内容的格式是否满足网站的要求
    后端验证： 用户输入的内容是否能在数据库中查到