jQuery插件-validate

本文轉載自查看原文 2018-08-02 22:42 941 JAVA

下載地址

官網下載地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

幫助文檔位置：http://jqueryvalidation.org/documentation/

菜鳥網地址： http://www.runoob.com/jquery/jquery-plugin-validate.html

【使用步驟】

導入jquery文件；
導入jquery.validate.js文件；
在頁面加載完成后，確定對哪個表單進行校驗，校驗方法為jq表單.validate();
配置校驗規則和提示信息；

【需求】：

使用jQuery的validate插件實現一個簡單的表單驗證：

用戶名不能為空；
密碼是4-6位；

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        #form1 input.error {
            border: solid 1px red;
        }

        #form1 label.error {
            margin-left: 10px;
            color: red;
        }
    </style>
</head>

<body style="margin: 50px;">
<form id="form1" action="#" method="get">
    <table>
        <tr>
            <td>用戶名</td>
            <td><input type="text" name="username" id="username" /></td>
        </tr>
        <tr>
            <td>密碼</td>
            <td><input type="password" name="password" id="password" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="提交" /></td>
        </tr>
    </table>

</form>

</body>

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">

    $("#form1").validate(
        {
            rules:{
                username:{required:true},
                password:{required:true,minlength:4,maxlength:6}
            },

            messages:{
                username:{required:"用戶名必填"},
                password:{
                    required:"密碼不能為空",
                    minlength:"密碼的最小長度為4",
                    maxlength:"密碼的最大長度為6"
                        }
                     }
        }
    )
    
</script>

</html>

左右選中案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="content-type" content="text/html">
    <title>左右選中</title>
    <style>
        input[type='button']{ width: 50px;}
    </style>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(
            function(){
                /*右移操作*/
                //全部右移
                $("#toRight3").click(function(){$("#left option").appendTo($("#right")); });

                //選中的右移
                $("#toRight2").click(function(){$("#left option:selected").appendTo($("#right"));});

                //選中的第一個右移
                $("#toRight1").click(function(){$("#left option:selected:first").appendTo($("#right"));});

                /*----------------------------------------------------------------------------------------*/
                /*左移操作*/
                //全部左移
                $("#toLeft3").click(function () {$("#right option").appendTo($("#left"));});

                //選中的左移
                $("#toLeft2").click(function () {$("#right option:selected").appendTo($("#left"));});

                //選中的第一個左移
                $("#toLeft1").click(function () {$("#right option:selected:first").appendTo($("#left"));});

            }
        );

    </script>

</head>
<body>
    <table>
        <tr>

            <td>
                <select id="left" multiple="true" style="width: 100px" size="10">
                    <option>生</option>
                    <option>活</option>
                    <option>不</option>
                    <option>易</option>
                    
                </select>
            </td>

            <td>
                <input type="button" value=">" id="toRight1"> <br>
                <input type="button" value=">>" id="toRight2"> <br>
                <input type="button" value=">>>" id="toRight3"> <br><br>

                <input type="button" value="<" id="toLeft1"> <br>
                <input type="button" value="<<" id="toLeft2"> <br>
                <input type="button" value="<<<" id="toLeft3">
            </td>

            <td>
                <select id="right" multiple="multiple" style="width: 100px" size="10"></select>
            </td>
        </tr>
    </table>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery插件之validate jquery validate表單驗證插件 jquery validate 插件使用心得設置jQuery validate插件錯誤提示位置 jQuery.Validate表單驗證插件 jquery.validate.unobtrusive.js插件作用 jquery validate表單驗證插件-推薦 jQuery Validate 插件[表單驗證屬性介紹] jQuery Validate插件驗證實例 jQuery Validate