首页 > 其他 > 详细

Validate常用校验

时间:2017-07-30 16:43:33      阅读:264      评论:0      收藏:0      [点我收藏+]

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" //校验两次密码相同,如果对应的控件没有校验信息则使用默认的校验信息

 

Validate常用校验

原文:http://www.cnblogs.com/zhangjinru123/p/7259237.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!