jQuery插件-validate

Posted xinruyi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery插件-validate相关的知识,希望对你有一定的参考价值。

技术分享图片

下载地址

官网下载地址:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

帮助文档位置:http://jqueryvalidation.org/documentation/

菜鸟网地址: http://www.runoob.com/jquery/jquery-plugin-validate.html
技术分享图片

 

【使用步骤】

  1. 导入jquery文件;

  2. 导入jquery.validate.js文件;

  3. 在页面加载完成后,确定对哪个表单进行校验,校验方法为jq表单.validate();

  4. 配置校验规则和提示信息;

【需求】:

? 使用jQuery的validate插件实现一个简单的表单验证:

  1. 用户名不能为空;

  2. 密码是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>

  

 

 

 

 



以上是关于jQuery插件-validate的主要内容,如果未能解决你的问题,请参考以下文章

表单验证插件之jquery.validate.js

jQuery.validate.js表单验证插件

Jquery Validation 不适用于 wordpress 插件

jQuery-validate插件初级篇

jquery插件-表单验证插件-validator对象

jQuery插件 -- 表单验证插件jquery.validate.js