Validate常用校验

Posted 2020-09-30 zhangjinru123

1、首先将jQuery.js和jquery.validate.js加入对应的页面中，如果要中文的提示语还要把messages_zh.js加入，以及对应的css文件。

<link href="../css/screen.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/messages_zh.js"></script>
<script type="text/javascript" src="../js/index.js"></script>

对应的html和js代码如下

    <form class="cmxform" id="commentForm" method="get" action="">
            <p>
                <label for="cname">Name(必需, 最小两个字母)</label>
                <input id="cname" name="name" minlength="2" type="text" required />
            </p>
            <p>
                <label for="cemail">E-Mail (必需)</label> 
                <input id="cemail" type="email" name="email" required>
            </p>
            <p>
                <label for="curl">URL (可选)</label> 
                <input id="curl" type="url" name="url">
            </p>
            <p>
                <label for="ccomment">备注 (必需)</label>
                <textarea id="ccomment" name="comment" required></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="Submit">
            </p>
    </form>

$(function() {
    $("#commentForm").validate();
});

$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});

常用的校验规则：

2、将校验规则写到js中

<form class="cmxform" id="signupForm" method="get" action="">
        <p>
            <label for="firstname">名字</label> <input id="firstname"
                name="firstname" type="text">
        </p>
        <p>
            <label for="lastname">姓氏</label> <input id="lastname" name="lastname"
                type="text">
        </p>
        <p>
            <label for="username">用户名</label> <input id="username"
                name="username" type="text">
        </p>
        <p>
            <label for="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>
            <label for="email">Email</label> <input id="email" name="email"
                type="email">
        </p>
        <p>
            <label for="agree">请同意我们的声明</label> <input type="checkbox"
                class="checkbox" id="agree" name="agree">
        </p>

        <p>
            <input class="submit" type="submit" value="提交">
        </p>
        </fieldset>
    </form>

$(function() {
    $("#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: "请输入您的名字",
            lastname: "请输入您的姓氏",
            username: {
                required: "请输入用户名",
                minlength: "用户名必需由两个字母组成"
            },
            password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母"
            },
            confirm_password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母",
                equalTo: "两次密码输入不一致"
            },
            email: "请输入一个正确的邮箱",
            agree: "请接受我们的声明"
        }
    })
});
$.validator.setDefaults({
    submitHandler: function() {
        alert("提交事件!");
    }
});

其中 equalTo: "#password" //校验两次密码相同，如果对应的控件没有校验信息则使用默认的校验信息