前端笔记6 表单校验与正则表达式

表单验证

为什么需要进行表单验证

用户书写 用户名和密码 之后 , 最终是需要提交到服务器上的
用户注册 QQ 号, 把信息提交各腾讯公司服务器

使用前端验证的好处

减轻服务器的压力
保证输入的数据符合要求

表单验证的思路

1- 获得表单元素值
2- 使用JavaScript的一些方法对数据进行判断
3- 当表单提交时，触发事件，对获取的数据进行验证

案例

验证 用户名 不能为空

// 使用 form 对象 绑定 提交事件
$("form").submit(function(){
    // 不为空
    if($("#username").val() == ""){
        alert("用户名不能为空, 请重新输入");
        // 使用return true  或 false  来决定 方法是否继续执行
        return false;
    }
    return true;
});

判断 用户名 6- 18 位之间

$("form").submit(function(){
    var value = $("#username").val();
    if(value.length < 6 || value.length > 18){
        alert("用户名长度必须在 6- 18 位之间!");
        return false;
    }
    return true;
});

邮箱验证

$("form").submit(function(){
    var value = $("#email").val();
    // 获取email 中 @ 的下标 和 . 的下标  并且 @ 的下标要在.之前
    var index1 = value.indexOf("@");
    var index2 = value.lastIndexOf(".");
    if(!(index1 != -1 && index2 != -1 && index1 < index2)){
        alert("邮箱不满足条件!");
        // 使用return true  或 false  来决定 方法是否继续执行
        return false;
    }
    return true;

手机号必须全部为数字 第一位为1 之后 一共10位

// 使用 form 对象 绑定 提交事件
$("form").submit(function(){
    var value = $("#telephone").val();
    // 是否为 11 位  第一位为 1  (之后10 位全部为 数字)
    var len = value.length;
    if(len != 11){
        alert("必须为11 位");
        return false;
    }
    // 使用字符串截取 第一位
    var first = value.substring(0,1);
    // console.log(first);
    if(first != "1"){
        alert("手机号第一位 必须为 1");
        return false;
    }
    // 之后10 位都是数字
    for(let i = 1;i < value.length; i++){
        let m = value.substring(i,i+1);
        // isNaN() 函数的含义为 Not a Number 不是一个数字
        if(isNaN(m)){
            alert("全部数据必须为数字");
            return false;
        }
    }
});

两次密码输入是否一致

$("form").submit(function(){
    var pwd = $("#pwd").val();
    if (pwd == "") {
        alert("密码不能为空");
        return false;
    }
    if (pwd.length < 6) {
        alert("密码必须等于或大于6个字符");
        return false;
    }
    var repwd = $("#repwd").val();
    if (pwd != repwd) {
        alert("两次输入的密码不一致");
        return false;
    }
})

实现动态提示信息

表单事件

聚焦事件 focus

// 聚焦事件
$("#pwd").focus(function(){
    $(this).next().empty();
    //  $(this).next().html("");
});

失去焦点事件 blur

$("#pwd").blur(function(){
    var mess;
    var pwd = $(this).val();
    if (pwd == "") {
        mess = "密码不能为空!!";
        $(this).next().html(mess.fontcolor("red"));
        return;
    }
    if (pwd.length < 6) {
        mess = "密码长度不能小于 6 个字符!!";
        $(this).next().html(mess.fontcolor("red"));
        return;
    }
    mess = "密码可用!!";
    $(this).next().html(mess.fontcolor("green"));
});

正则表达式

为什么需要正则表达式

简洁的代码
严谨的验证文本框中的内容

正则表达式语法

普通语法

语法	描述
单个字符(多个字符)	匹配到该字符的所有字符串
[abcd]或者[a-g]	匹配中括号中出现的任意一个字符
[^a]	取反 只要是在中括号中没有出现的
(12|ee|ad)	括号表示一个整体
|	或者

特殊符号

符号	描述
/ XXX /	表示一个模式的开始和结束
^	(在中括号外匹配字符串开始) (在中括号内 取反)
$	匹配字符串结束
/^内容$/	一般一个正则表达式的语法
\d	匹配一个数字 等价于[0-9]
\D	除了数字之外的任何字符 等价于[ ^0-9]
\s	任何空白字符
\S	任何非空白字符
\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W	任何非单字字符，等价于[^a-zA-Z0-9_]
.	除了换行之外的任意字符

数量规则

符号	描述
{n}	匹配字符出现了多少次
{n,}	字符串最少出现 n次
{n,m}	字符最少出现n次 最多出现m次
*	等价于 {0,} 匹配前一项0次或多次
+	等价于{1,} 匹配前一项1次或多次
?	等价于{0,1} 匹配前一项0次或1次

手机号的正则规范

1[35678]\d{9}

JS 中的 正则表达式应用

案例

$("#telephone").blur(function(){
    // 定义一个正则表达式
    var reg = /^1[35678]\d{9}$/;
    var tele = $(this).val();
    // test() 方法  满足正则 返回 true  不满足返回false
    // alert(reg.test(tele));
    if(reg.test(tele)){
        $(this).next().html("手机号可用".fontcolor("green"));
    }else{
        $(this).next().html("手机号有误".fontcolor("red"));
    }
});

邮箱的正则规范

用户名、密码、电子邮箱、手机号码、身份证号码、生日、邮政编码、固定电话

正则表达式的定义方式

第一种

var reg = /^$/;
var reg = /^1[35678]\\d{9}$/;

第二种 (构造)

var reg = new RegExp("");
var reg = new RegExp("^1[35678]\\d{9}$");

可传参数

g : 进行全局匹配
i : 不区分大小写匹配
m : 可以进行多行匹配

var reg = /^1[35678]\\d{9}$/g;
var reg = new RegExp("^1[35678]\\d{9}$","g");

常用方法

正则表达式的方法 test()

正则表达式对象.test(字符串)

字符串中方法 match()

字符串 .match(正则表达式对象)

年龄验证

0 - 120 之间

var regAge = /^120$|^((1[0-1]|[1-9])?\d)$/m;
^120$ 
^((1[0-1]|[1-9])?\d)$    ( 0 - 119)