表单校验JQuery与正则的使用

😂 这篇文章最后更新于930天前,您需要注意相关的内容是否还可用。

简单讲解下正则的使用:

  1. 单个字符:[]如: a [a-zA-Z0-9_]

    • 特殊符号代表特殊含义的单个字符:\d:单个数字字符 [0-9]\w:单个单词字符[a-zA-Z0-9_]

  2. 量词符号:?:表示出现0次或1次*:表示出现0次或多次+:出现1次或多次{m,n}:表示 m<= 数量 <= n* m如果缺省: {,n}:最多n次* n如果缺省:{m,} 最少m次

  3. 开始结束符号

    • ^:开始

    • $:结束

创建

  1. var reg = new RegExp("正则表达式");

  2. var reg = /正则表达式/;方法. test(参数):验证指定的字符串是否符合正则定义的规范,简单示例:

var a="12345";
var reg=/^\w{6,12}$/;   //正则 表示字符数6-12
var b=reg.test(a);		//此处a值不符合返回false
alert(b);

下面以注册表单校验为例:

<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*思路:
    * 为每个单元格建立校验
    * 在输入框离开焦点跟提交时候启用校验*/
    function checkUsername() { //校验用户名
        /*获取用户名值
        * 定义正则
        * 判断是否为true*/
        var username = $("#username").val();
        var reg_username = /^\w{3,10}$/; //用户名为3-10位字符串
        var flag = reg_username.test(username);
        if (flag) {
            console.log("用户名合法") //浏览器控制台显示日志内容 实际不用写
            $("#username").css("border", "");
        } else {
            console.log("用户名不合法")
            $("#username").css("border", "1px solid red");
        }
        return flag;
    }

    function checkPassword() {
        var password = $("#password").val();
        var reg_password = /^\w{6,16}$/; //密码为6-10位字符串
        var flag = reg_password.test(password);
        if (flag) {
            console.log("密码合法")
            $("#password").css("border", "");
        } else {
            console.log("密码不合法")
            $("#password").css("border", "1px solid red");
        }
        return flag;
    }

    function checkEmail() {
        var email = $("#email").val();
        var reg_email = /^\w+\@\w+\.\w+$/; //符合特定格式的字符串 带@跟.
        var flag = reg_email.test(email);
        if (flag) {
            console.log("邮箱合法")
            $("#email").css("border", "");
        } else {
            console.log("邮箱不合法")
            $("#email").css("border", "1px solid red");
        }
        return flag;
    }

    function checkName() {
        var name = $("#name").val();
        var reg_name = /^\w{3,10}$/;
        var flag = reg_name.test(name);
        if (flag) {
            console.log("姓名合法")
            $("#name").css("border", "");
        } else {
            console.log("姓名不合法")
            $("#name").css("border", "1px solid red");
        }
        return flag;
    }

    function checkTelephone() {
        var telephone = $("#telephone").val();
        var reg_telephone = /^\1\d{10}$/; //首位为1后面十位为数字
        var flag = reg_telephone.test(telephone);
        if (flag) {
            console.log("手机合法")
            $("#telephone").css("border", "");
        } else {
            console.log("手机不合法")
            $("#telephone").css("border", "1px solid red");
        }
        return flag;
    }

    function checkCheck() {
        var check = $("#check").val();
        var reg_check = /^\w{4}$/; //已知验证码为四位字符
        var flag = reg_check.test(check);
        if (flag) {
            console.log("验证码合法")
            $("#check").css("border", "");
        } else {
            console.log("验证码不合法")
            $("#check").css("border", "1px solid red");
        }
        return flag;
    }

    $(function () {
        /*当表单提交时调用校验方法*/
        $("#registerForm").submit(function () {
            if (checkName() && checkPassword() && checkName() && checkEmail() && checkTelephone() && checkCheck()) {
                $.post("user/regist", $(this).serialize(), function (data) { //serialize()序列化表单内容
                    if (data.flag) { //从服务器获取注册结果
                        console.log("注册成功")
                        location.href = "regist_ok.html"; //注册成功跳转页面
                    } else {
                        console.log("注册失败")
                        $("#errorMsg").html(data.errorMsg); //注册失败显示错误信息
                    }
                })
            }
        });
        $("#username").blur(checkUsername); //鼠标离开输入框执行事件
        $("#password").blur(checkPassword); //注意方法名后不要加(),否则失焦事件将无异议
        $("#email").blur(checkEmail);
        $("#name").blur(checkName);
        $("#telephone").blur(checkTelephone);
        $("#check").blur(checkCheck);
    })
</script>