jQuery插件-validate

時間 2019-12-20

標籤 jquery 插件 validate 欄目 JQuery 简体版

原文原文鏈接

下載地址

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

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

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

html

【使用步驟】java

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

【需求】：插件

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

用戶名不能爲空；
密碼是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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。