码迷,mamicode.com
首页 > Web开发 > 详细

jQuery插件-validate

时间:2018-08-03 00:52:49      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:ati   一个   不能   信息   ESS   doctype   lis   plugin   lang   

技术分享图片

下载地址

官网下载地址: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

标签:ati   一个   不能   信息   ESS   doctype   lis   plugin   lang   

原文地址:https://www.cnblogs.com/xinruyi/p/9410690.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!