JQuery验证库jquery.validate 初探验证插件

最新推荐文章于 2023-06-07 09:12:23 发布

dannywj1371

最新推荐文章于 2023-06-07 09:12:23 发布

阅读量3.1k

点赞数

分类专栏： JavaScript JQuery WEB前端文章标签： jquery email input xhtml string action

本文链接：https://blog.csdn.net/dannywj1371/article/details/6954294

版权

JavaScript 同时被 3 个专栏收录

84 篇文章 0 订阅

订阅专栏

WEB前端

36 篇文章 0 订阅

订阅专栏

JQuery

26 篇文章 0 订阅

订阅专栏

成功完成了官网Demo中的小测试：

PS 可选项的验证方法：

http://my.oschina.net/duanlijun/blog/9951

[4] rules( "add", rules )       返回：Options
      参数"add"     类型：String
      参数 rules     类型：Options   要添加的规则，与validate方法中的验证规则一致。
      说明：添加规则到匹配的表单元素，返回该元素的所有验证规则，需要先执行$("form").validate()。在rules中也可以添加用户自定义的消息对象。

Js代码

$("#myinput").rules("add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.format("Please, at least {0} characters are necessary")
}
});

[5] rules( "remove", [rules] )       返回：Options
      参数"remove"     类型：String
      参数 rules (Options)    类型：Options   用空白符分割的验证规则。只操作通过rules选项或rules("add")指定的验证规则。
      说明：从第一个匹配的表单元素中移除指定的验证规则，并返回该元素所有的验证规则。

Js代码

$("#myinput").rules("remove");
$("#myinput").rules("remove", "min max");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">

        $().ready(function () {


            // validate signup form on keyup and submit
            $("#signupForm").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    topic: {
                        required: "#newsletter:checked",
                        minlength: 2
                    },
                    agree: "required"
                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname",
                    username: {
                        required: "Please enter a username",
                        minlength: "Your username must consist of at least 2 characters"
                    },
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    confirm_password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long",
                        equalTo: "Please enter the same password as above"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                }
            });
        });
    </script>
</head>
<body>
    <form class="cmxform" id="signupForm" method="get" action="">
    <p>
        <label for="firstname">
            Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
    <p>
        <label for="lastname">
            Lastname</label>
        <input id="lastname" name="lastname" />
    </p>
    <p>
        <label for="username">
            Username</label>
        <input id="username" name="username" />
    </p>
    <p>
        <label for="password">
            Password</label>
        <input id="password" name="password" type="password" />
    </p>
    <p>
        <label for="confirm_password">
            Confirm password</label>
        <input id="confirm_password" name="confirm_password" type="password" />
    </p>
    <p>
        <label for="email">
            Email</label>
        <input id="email" name="email" type="email" />
    </p>
    </form>
</body>
</html>