JqueryValidate使用

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery.validate测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <link href="Content/validation.css" rel="stylesheet" />
</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="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>
            <label for="Onlyone">自定义验证</label>
            <input id="Onlyone" name="Onlyone" type="text" />
        </p>
        <p>
            <input class="submit" type="submit" value="Submit" />
        </p>
    </form>
</body>
</html>
<script type=text/javascript>
    $().ready(function () {
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                Onlyone: {
                    Onlyone:["1"]
                }
            },
            messages: {
                firstname: "请输入姓名",
                email: {
                    required: "请输入Email地址",
                    email: "请输入正确的email地址"
                },
                password: {
                    required: "请输入密码",
                    minlength: jQuery.format("密码不能小于{0}个字 符")
                },
                confirm_password: {
                    required: "请输入确认密码",
                    minlength: "确认密码不能小于5个字符",
                    equalTo: "两次输入密码不一致不一致"
                }
            },
            success: function (label) {//验证通过
                label.html(" ").addClass("checked");
            },
            errorPlacement: function (error, element) {//错误信息显示的位置
                error.appendTo(element.parent());//验证的元素后面(默认)
                element.addClass("error");//添加红色选中框
            },
            highlight: function (element, errorClass) {//可以给未通过验证的元素加效果、闪烁等
                $(element).parent().find("." + errorClass).removeClass("checked");
            },
            submitHandler: function () {
                alert("提交!!!");
            },
        });
    });
    //value 是元素的值,element 是元素本身,param 是参数。
    $.validator.addMethod("Onlyone", function (value, element, params) {
        if (value == params) {
            return true;
        }
        else {
            return false;
        }
    },"必须是1");
</script> 


  

时间: 2024-11-18 08:03:26

JqueryValidate使用的相关文章

jquery-validate插件

jQuery Validation 插件 优点:1.表单验证非常简单方便,并且提供了许多配置项目2.国际化,可以自定义提示信息 命令行安装 //初始化bowerbower init //使用bower安装jquerybower install jquery --save-dev //使用bower安装jquery-validate插件bower install jquery-validate --save-dev //使用bower安装angularbower install angular -

关于jquery-validate验证表单

最近在做微信端的界面,一直写表单验证!一直在写表单验证!发现jquery-validate还真是好用哎,今天总结了一些: (1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06

jQuery-Validate验证插件的使用步骤详解

1. 写在前面 (友情提示,点我:下载源码) 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到se

验证插件(jquery-validate)

1.引入插件的js文件 2.给表单绑定一个id属性,然后写验证规则 验证规则如下: 效果:

jquery-validate.js

还没正式使用,网上摘下来的.有空再继续仔细看看 <!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&

jquery-validate校验

校验js $('#frm').validate({ focusInvalid: false, onfocusout: function (element) { var obj = $(element), type = element.type; if (type === 'text' || type === 'textarea') { obj.val($.trim(obj.val())).valid(); } else { obj.valid(); } }, rules: { Password:

jQuery-validate插件初级篇

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 1.效果示例 2.代码示例 1.validateUtil.js 1 /* 2 * 基于jquery 校验插件 3 * by [email protected] 4 */ 5 $(function (){ 6 window.validateUtil = { 7 /** 8 * 显示提

JqueryValidate 修改 为根据ID验证

<!--修改validate根据ID验证 --> <script type="text/javascript"> if ($.validator) { $.validator.prototype.elements = function () { var validator = this, rulesCache = {}; // select all valid inputs inside the form (no submit or reset buttons)

jquery-validate的用法

默认校验规则 (1)required:true               必输字段(2)remote:"check.php"          使用ajax方法调用check.php验证输入值(3)email:true                  必须输入正确格式的电子邮件(4)url:true                    必须输入正确格式的网址(5)date:true                   必须输入正确格式的日期(6)dateISO:true