jQuery（表单验证插件&jquery-validate&jquery ui）

最新推荐文章于 2024-06-29 14:47:07 发布

世间百态不过尔尔

最新推荐文章于 2024-06-29 14:47:07 发布

阅读量1.4k

点赞数

分类专栏： web（jQuery）文章标签：表单验证插件&jquery-validate&jquery ui

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88543224

版权

web（jQuery）专栏收录该内容

9 篇文章 0 订阅

订阅专栏

表单验证插件
表单验证主要是针对表单元素的值进行验证，并根据验证结果给出文字或图片提示；
主要验证用户是否输入了内容或者输入的内容是否符合要求

常用的表单验证插件有：jQuery-validate、formValidator

jquery-validate
首先引入validate的js文件及本地化文件
1、将验证直接写在html中
-required 表示必填字段
-type="email"表示有效的邮箱地址:包含用户名@域名
-type=“url” 表示有效的url，包含协议和域名
-equalTo:“选择器”; 输入的内容是否等于某元素的内容
2、在js中进行验证
首先需要设置表单控件的name属性
验证语法：
form对象.validate({
rules:{
name值：“验证条件”,
name值 : “验证条件”,
…
name值 : “验证条件”
},
messages:{
name值：“提示信息”,
name值 : “提示信息”,
…
name值 : “提示信息”
}
});

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src = "jquery-3.1.1.min.js"></script>
    <script src = "jquery.validate.min.js"></script>
    <script src = "messages_zh.min.js"></script>
</head>
<body>
    <form action="" id="form1">
        <input type="text" id="uname" required>
        <br>
        <input type="email">
        <br>
        <input type="url">
        <br>
        <input type="date">
        <br>
        <input type="number">
        <input type="submit">

    </form>
    <form id="form2">
        <input type="text" id="username" name="username">
        <input type="password" id="password" name="password">
        <input type="text" name="uemail">
        <input type="text" name="phone">
        <input type="submit">
    </form>
    <script>
        $("#form1").validate();
        $("#form2").validate({
            rules:{
                username : "required",
                password : "required",
                uemail : {
                    email : true,
                    required:true
                },
                phone:{
                    equalTo:"123"
                }
            },
            messages:{
                username : "用户名写错了！",
                password : "密码不对！",
                uemail: {
                    email:"邮箱不正确",
                    required:"赶紧填邮箱"
                },
                phone:"输入的不相等"
            }
        })
    </script>
</body>
</html>

、dialog
通过：jq对象.dialog()进行绑定
元素的title属性会作为弹出框的标题显示
元素的文本内容（可以识别html标记）

dialog默认是自动打开的，我们可以通过设置atuoOpen属性进行设置是否自动打开
autoOpen:true/false;

显示按钮：、
buttons:{"按钮标题":按钮触发函数}

是否允许拖动
draggable:true/false;为true表示允许拖动，false表示不允许拖动

是否允许调整大小
resizable:true/false;  true表示允许调整，false表示不允许调整

2、排序（sortable）
可以将元素转换为拖放风格的列表，可以通过拖放的方式进行顺序的调整

显示为网格


!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src = "jquery-3.1.1.min.js"></script>
    <script src = "jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
    <style>
        #ul1 li{
            width: 200px;
            border: 1px solid red;
            margin:10px;
            padding: 10px;
            list-style: none;
            background: gray;
        }
        #ul2{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #ul2 li{
            margin: 5px;
            padding: 10px;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background: gray;
            float: left;
        }
    </style>
</head>
<body>
    <div id = "d1" title="我的弹出框">
        <h1>标题</h1>
        这是一个自定义的弹出框
    </div>
    <div id = "d2" title="我的弹出框">
        <h1>标题</h1>
        这是一个自定义的弹出框
    </div>
    <input type="button" value="打开" class="openDialog">
    <input type="button" value="一个按钮" class="haveOneBtn">

    <ul id="ul1">
        <li>12</li>
        <li>23</li>
        <li>4</li>
        <li>r</li>
        <li>g</li>
    </ul>

    <ul id="ul2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
    <script>
        $("#d1").dialog({
            autoOpen:false,//是否默认打开\
            //添加按钮
            buttons:{
                "按钮":function(){
                    console.log("-----");
                    //关闭dialog
                    $(this).dialog("close");
                },
                "确定":function(){

                }
            }
        });
        $(".openDialog").click(function(){
            // 打开对话框
            $("#d1").dialog("open");
        });

        // 一个按钮
        $("#d2").dialog({
            autoOpen:false,//是否默认打开\
            //添加按钮
            buttons:{
                "按钮":function(){
                    console.log("-----");
                    //关闭dialog
                    $(this).dialog("close");
                }
            },
            draggable:false,//不允许拖动
            resizable:false

        });
        $(".haveOneBtn").click(function(){
            // 打开对话框
            $("#d2").dialog("open");
        });

        $("#ul1").sortable({
            opacity:0.6,//拖动过程中的半透明效果
            cursor:"move",//拖动时鼠标的样式
            axis:"y"
        });

        // 显示为网格
        $("#ul2").sortable();
        // 调整为网格
        // $("#ul2").disableSelection();
    </script>
</body>
</html>