前端jQuery表单验证

前端表单验证与正则表达式实战解析

最新推荐文章于 2021-12-05 16:35:19 发布

原创最新推荐文章于 2021-12-05 16:35:19 发布 · 756 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #html

jQuery 专栏收录该内容

6 篇文章

订阅专栏

1.表单校验种类

1.1对用户名进行判空

1.2密码长度必须大于等于6个字符

1.3邮箱必须包含@特殊字符

1.4姓名中不能包含数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证</title>
    <style type="text/css">
        table {
            border: 1px solid black;
            margin: auto;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="first">
        <form action="模板.html">
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" class="one"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text" class="two"></td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td><input type="text" class="three"></td>
                </tr>
                <tr>
                    <td><input type="reset"></td>
                    <td><input type="button" class="button" value="提交"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    function check() {
        //判断用户名是否为空
        var name = $(".one").val().trim(); // trim去除空格
        if (name == "") {
            alert("用户名不能为空");
            return false;
        }
        //判断密码是否大于6位
        var password = $(".two").val().trim();
        if (password.length < 6) {
            alert("密码不能小于6位");
            return false;
        }
        //邮箱中必须包含@
        var email = $(".three").val().trim();
        if (email.indexOf("@")==-1){
            alert("邮箱必须包含@");
            return false;
        }
        //用户名不能有数字
        for (var i = 0; i < name.length; i++){
            var str = name.substring(i,i+1);
            if (isNaN(str)==false){
                alert("用户名不能有数字");
                return false;
            }
        } 
        return true;
    }
    $(function () {
        $(".button").click(function () {
            if (check() == true) {
                window.open("模板.html");
            }
        });
    });
</script>
</html>

2.焦点和文本框

2.1blur() 定义：从文本域中移开焦点

2.2focus() 定义：从文本域中设置焦点

2.3select() 定义：选取文本域中的内容,突出显示输入区域的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"></style>
</head>
<body>
    <input type="text" id="one">
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("#one").select(function(){
            $(this).css("background","yellow");
        });
        $("#one").blur(function(){
            $(this).css("background","yellow");
        });
        $("#one").focus(function(){
            $(this).css("background","yellow");
        });
    });
</script>
</html>

3.正则表达式

描述了一种字符串的匹配模式

3.1基本语法结构

var 变量名=/表达式/参数

中间的表达式是匹配的内容，参数是一些匹配规则

参数常用有：

i ：代表对大小写不敏感的匹配

g ：全局匹配

常用的方法是：

exec() 检索字符中是正则表达式的匹配，返回找到的值，并确定位置

text() 检索字符串中指定的值，查看是否符合正则表达式，返回值为布尔类型

3.2正则表达式参数方法小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">
    //无参数g
    var regx = /user\d/;
    var str = "user1aaaaaaabuser223";
    var r1 = regx.exec(str);
    var r2 = regx.exec(str);
    document.write("r1:" + r1 + "    r2:" + r2 + "<br/>");
    //参数g
    var regx = /user\d/g;
    var str = "user1aaaaaaabuser223";
    var r1 = regx.exec(str);
    var r2 = regx.exec(str);
    document.write("r1:" + r1 + "    r2:" + r2 + "<br/>");
    //无参数i
    var regx = /user/;
    var str1 = "user";
    var str2 = "User";
    var str3 = "USER";
    var r1 = regx.test(str1);
    var r2 = regx.test(str2);
    var r3 = regx.test(str3);
    document.write("r1:" + r1 + "    r2:" + r2 + "    r3:" + r3 + "<br/>");
    //参数i
    var regx = /user/i;
    var str1 = "user";
    var str2 = "User";
    var str3 = "USER";
    var r1 = regx.test(str1);
    var r2 = regx.test(str2);
    var r3 = regx.test(str3);
    document.write("r1:" + r1 + "    r2:" + r2 + "    r3:" + r3 + "<br/>");
</script>
</html>

3.3正则表达式6位数字密码验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="base">
        输入框：<input type="text" onblur="numchecked()">
    </div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    //企业用户登录
    function numchecked() {
        var regx = /^\d{6}$/;
        var str = $("input").val().trim();
        if (regx.test(str) == false) {
            alert("密码必须为6位数字");
            return false;
        }
    }
</script>
</html>

符号	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除了数字之外的任何字符，等价于0-9
\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W	任何非单字字符，等价于a-zA-z0-9_
.	除了换行符之外的任意字符

{n}	匹配前一项n次
{n,}	匹配前一项n次，或者多次
{n,m}	匹配前一项至少n次，但是不能超过m次
*	匹配前一项0次或多次，等价于{0,}
+	匹配前一项1次或多次，等价于{1,}
？	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
w	查找单词字符。
W	查找非单词字符。
d	查找数字。
D	查找非数字字符。
s	查找空白字符。
S	查找非空白字符。
b	查找位于单词的开头或结尾的匹配。
B	查找不处在单词的开头或结尾的匹配。
	查找 NUL 字符。
n	查找换行符。
f	查找换页符。
r	查找回车符。
t	查找制表符。
v	查找垂直制表符。
xxx	查找以八进制数 xxx 规定的字符。
xdd	查找以十六进制数 dd 规定的字符。
uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

支持正则表达式的 String 对象的方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。