jquery 插件 validate 学习

jquery是十分方便的对于现在来说。

首先应该明白一个问题：

<p>

<label for="password">Password</label>

</p>

请问<input >的父元素是谁？

当然，如果看不出来，我们可以使用chrome浏览器一眼真假；

});

在chrome 浏览器的显示居然是Password,好了，其实就应该是它。这是label标签 for 属性。为什么我会提这个呢。接下来你就明白了。

jquery 目前兼容性是很好的，所以jquery 官方也提供了很多有用的插件，今天来学习下表达插件；

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="assert/css/milk.css" rel="stylesheet" />

    <script src="assert/jquery-1.11.3.min.js"></script>
    <script src="assert/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#signupForm").validate({
                rules: {
                    firstname: "required",
                    email: {
                        required: true,
                        email:true
                    },
                    password: {
                        required: true,
                        minlength:6
                    },
                    confirm_password: {
                        required: true,
                        minlength: 6,
                        equalTo:"#password"
                    },
                    phone: {
                        required: true,
                        phone:true
                    },
                },
                message:{
                    firstname: "请输入姓名",
                    email: {
                        required: "请输入email地址",
                        email:"请输入正确的email地址"
                    },
                    password: {
                        required: "请输入密码",
                        minlength:jQuery.validator.format("密码不能小于{0}个字符")
                    },
                    confirm_password: {
                        required: "请输入确认密码",
                        minlength: "确认密码不能小于5个字符",
                        equalTo:"两次输入密码不一致不一致"
                    },
                    phone: {
                        required: "请输入phone!",
                        phone:"请输入正确的电话号码"
                    }
                },
                success:function(label)
                {
                    label.html(" ").addClass("checked");
                },
                highlight: function (element, errorClass) {
                    $(element).parent().find("." + errorClass).removeClass("checked");
                }
            });

        });
    </script>
</head>
<body>
    <form id="signupForm" method="get" action="">
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" />
           
        </p>
        <p>
            <label for="email">E-Mail</label>
            <input id="email" name="email" />
        </p>
        <p>
            <label for="phone">phone</label>
            <input id="phone" maxlength="13" name="phone" />
        </p>
        <p>
            <!--<label for="password">Password</label>-->
            <input id="password" name="password" type="password" />
        </p>
        <p>
            <label for="confirm_password">确认密码</label>
            <input id="confirm_password" name="confirm_password" type="password" />
        </p>
        <p>
            <input class="submit" type="submit" value="Submit" />
        </p>
    </form>
</body>
</html>

这个运行后的效果图就是这样的。

首先解释下：

 <link href="assert/css/milk.css" rel="stylesheet" />
这个是我自己添加的，我的学习建的文档目录如下：

你一看就明白这是验证成功和失败的样式，

 1 input.error{border:1px solid red;}
 2 label.error{
 3     background:url("../image/unchecked.gif") no-repeat 0px 0px;
 4     padding-left:16px;
 5     padding-bottom:2px;
 6     font-weight:bold;
 7     color:#EA5200;
 8 }
 9 label.checked{
10     background:url("../image/checked.gif") no-repeat 0px 0px;
11 }

我为什会这样添加样式呢，因为jquery默认就是把错误存放在label便签里面。

知道为什么，上面的也可以自己去修改。

 background:url("../image/unchecked.gif") no-repeat 0px 0px;

,

 <script src="assert/jquery-1.11.3.min.js"></script>
    <script src="assert/jquery.validate.min.js"></script>
这两个是必须要的引入，
rules 包含了所有的验证规则，message中是验证成功提示的信息，success：String，function ,如果success ：String，String会被认为是一个Css样式类，根据本上下文就是checked. 也可以跟一个函数，可以定义成功的字样。

hightlight：是获取高亮显示，获取文本焦点，本文中，如果输入文本时，验证出错，它将擦除原来的内容。

今天只能到这里了，如果想学习完整的教程请访问：

菜鸟教程 |Jquery validate"

posted @ 2015-11-17 17:28 Company 阅读(244) 评论(0) 编辑收藏举报

刷新页面返回顶部

Company

jquery 插件 validate 学习

公告