记录一次JQuery表单效验

最新推荐文章于 2024-07-17 09:43:10 发布

CrazySoul-K

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量104

点赞数

分类专栏：问题集文章标签： JQuery html 表单效验失去焦点事件

本文链接：https://blog.csdn.net/weixin_42397885/article/details/100435763

版权

问题集专栏收录该内容

3 篇文章 0 订阅

订阅专栏

记录一次JQuery的方式来实现表单效验

步骤

1. 创建一个html，包含表单元素
2. 给用户名和密码绑定失去焦点事件
3. 事件触发获取输入框内容，通过正则判断内容是否符合格式
4. 根据判断结果给出相应提示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单效验</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        var usernameFlag =false;
        var passwordFlag =false;
        function fun() {
            return usernameFlag&&passwordFlag;
        }
        $(function () {
            //事件触发获取输入框内容，通过正则判断内容是否符合格式
            $("#username").blur(function () {
                //获取文本框中的value
                var username = $("#username").val();
                //利用正则判断是否符合条件
                if (username.match(/^[a-z0-9_-]{3,16}$/)) {
                    //符合条件,追加写入提示信息
                    $("#usernameid").html("<font style='color: green'>用户名符合</font>");
                    usernameFlag=true;
                } else {
                    //不符合条件,提示用户重新输入
                    $("#usernameid").html("<font style='color: red'>用户格式不符合</font>");
                    usernameFlag=false;
                }
            });
            //判断密码
            $("#password").blur(function () {
                //获取文本框中的value
                var password = $("#password").val();
                //利用正则判断是否符合条件
                if (password.match(/^[a-z0-9_-]{6,18}$/)) {
                    passwordFlag=true;
                } else {
                    passwordFlag=false;
                }
            });
        })
    </script>
</head>
<body>
<!--form表单-->
<form action="" method="get" onsubmit="return fun()">
    <!--简单的使用表格,美观一点-->
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" id="username" name="username"><span id="usernameid"></span></td>

        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" id="password" name="password"><span id="passwordid"></span></td>

        </tr>
    </table>
    <input type="submit" value="点我" id="but1">

</form>

</body>
</html>

CrazySoul-K

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
记录一次JQuery表单效验

记录一次JQuery的方式来实现表单效验步骤创建一个html，包含表单元素给用户名和密码绑定失去焦点事件事件触发获取输入框内容，通过正则判断内容是否符合格式根据判断结果给出相应提示信息<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...
复制链接

扫一扫