前端jQuery表单验证

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

把字符串分割为字符串数组。

 

4.表单选择

:image

匹配所有的图像

:input

匹配所有的的input、textarea、select和button 元素

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值