jquery 验证

引入JS

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>

加载自定义验证

 <script>
        $(document).ready(function () {
            $("#formid").validate({
                rules: {
                    username: { required: true, minlength: 8 },
                    price: { required: true, digits: true }
                },
                messages: {
                    username: { required: "必须填写", minlength: "最少8个字符" },
                    price: { required: "必须填写", digits: "必须填写整数" }
                },          
                errorElement: "em",
                success: function (label) {
                    label.text("OK").addClass('success')
                } }); });
</script>

完整页面代码:


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Rep</title>
    <style>
        em.error {
            background-color:blue;
            background: url("images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }

        em.success {
            background-color:red;
            background: url("images/checked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }

    </style>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>

    <script>
        $(document).ready(function () {
            $("#formid").validate({
                rules: {
                    username: { required: true, minlength: 8 },
                    price: { required: true, digits: true }
                },
                messages: {
                    username: { required: "必须填写", minlength: "最少8个字符" },
                    price: { required: "必须填写", digits: "必须填写整数" }
                },
                errorElement: "em",
                success: function (label) {
                    label.text("OK").addClass('success')
                }
            });
        });

    </script>
</head>
<body>
    <form id="formid">
        <input id="username" name="username" size="25" value="" />
        <input id="price" name="price" size="25" value="" />

        <input id="Submit1" type="submit" class="submit" value="submit" />

    </form>
</body>
</html>


设置的规格

序号     规则     描述
1     required:true     必须输入的字段。
2     remote:"check.php"     使用 ajax 方法调用 check.php 验证输入值。
3     email:true     必须输入正确格式的电子邮件。
4     url:true     必须输入正确格式的网址。
5     date:true     必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6     dateISO:true     必须输入正确格式的日期(ISO),例如:2009-06-231998/01/22。只验证格式,不验证有效性。
7     number:true     必须输入合法的数字(负数,小数)。
8     digits:true     必须输入整数。
9     creditcard:     必须输入合法的信用卡号。
10     equalTo:"#field"     输入值必须和 #field 相同。
11     accept:     输入拥有合法后缀名的字符串(上传文件的后缀)。
12     maxlength:5     输入长度最多是 5 的字符串(汉字算一个字符)。
13     minlength:10     输入长度最小是 10 的字符串(汉字算一个字符)。
14     rangelength:[5,10]     输入长度必须介于 510 之间的字符串(汉字算一个字符)。
15     range:[5,10]     输入值必须介于 510 之间。
16     max:5     输入值不能大于 517     min:10     输入值不能小于 10

 

posted on 2016-04-29 11:25  邬兴亮  阅读(181)  评论(0编辑  收藏  举报

导航