`
huangyongxing310
  • 浏览: 494140 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

jQuery Validate 校验

 
阅读更多
https://www.runoob.com/jquery/jquery-plugin-validate.html



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler: function() {
                alert("提交事件!");
            }
        });
        $().ready(function() {
            $("#commentForm").validate({
                errorPlacement:function(error,element) {
                    element.css("background-color","yellow");
//                    alert(error);
//                    alert(element);
//                    error.appendTo(element.parent("td").next("td"));
                }
                ,
                success:
                function(label,element1) {
                    $(element1).css("background-color","red");
                    alert(label);
//                    label.text("ok!").addClass("success");
                },
//                ,
//        showErrors:function(errorMap,errorList) {
//            alert(errorMap);
//        }
            });
        });
    </script>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
        <legend>输入您的名字,邮箱,URL,备注。</legend>
        <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">
            <input class="submit" type="button" value="button" onclick='fun()'>
        </p>
    </fieldset>
</form>
</body>
</html>
<script>
    function fun(){
        $("#commentForm").valid();
    }
</script>
分享到:
评论

相关推荐

    jquery.validate表单验证密码完整例子(带密码强度显示)

    首先,`jQuery Validate`的核心功能是验证用户在表单中输入的数据,确保其符合预设的验证规则。例如,我们可以设定密码必须包含字母、数字、特殊字符等要求,以提高安全性。在提供的例子中,它会检查用户输入的密码...

    jquery validate 验证自定义样式

    在本文中,我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先,我们从标题"jquery validate 验证自定义样式"开始。jQuery Validate插件默认提供了一些基本的样式,但这些样式可能不能满足所有设计...

    jquery validate校验插件的相关js文件

    本资源是jquery validation插件的相关文件,包括了四个文件:jquery-1.6.4.js ,jquery.metadata.js ,jquery.validate.js ,jquery.validate.messages_cn.js

    jquery+validate.js+验证规则文件

    日期校验 ie6 出错,慎用。 6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。 7 number:true 必须输入合法的数字(负数,小数)。 8 digits:true 必须输入...

    jquery.validate 扩展身份证校验方法

    ### jQuery.validate 扩展身份证校验方法 在前端开发中,对用户输入的数据进行校验是非常重要的一步,它能够帮助开发者提高数据的准确性和安全性。本文将详细介绍如何使用`jQuery.validate`插件来扩展身份证号码的...

    jquery validate校验

    《jQuery Validate插件详解与应用》 在Web开发中,数据验证是不可或缺的一环,它确保用户输入的数据符合预设的格式和规则,从而保证数据的准确性和安全性。jQuery Validate插件是基于jQuery库的一个强大且易用的...

    jQuery Validate 校验多个相同name的方法

    在表单中,我们可能会遇到多个输入框具有相同名称的情况,例如单选按钮、复选框等,而jQuery Validate 默认只会校验第一个相同名称的输入框,这就给开发带来了不便。 为了解决这个问题,本文将介绍两种方法来修改 ...

    JQuery+validate校验+messages_zh中文的js库

    `jquery.validate.js` 和 `jquery.validate.min.js` 就是这个插件的源码和压缩版。这个插件提供了一套强大的规则引擎,可以轻松地为表单元素添加验证规则,例如必填、邮箱格式、数字范围等,极大地提高了用户输入...

    jquery validate 信息气泡提示

    在网页开发中,jQuery Validate 是一个非常常用的验证插件,用于对用户输入的数据进行校验,确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则,提高用户体验,减少服务器端的压力。结合 ...

    jQuery Validate 表单校验插件.zip

    jQuery Validate 插件依赖 jQuery 库,使用前需要先导入 jQuery的 js 文件,再导入 jquery.validate.js 插件,可以再导入中文提示信息文件 messages_zh.js

    jquery的validate表单校验插件

    《jQuery的validate表单校验插件深度解析》 在前端开发中,表单校验是必不可少的一个环节,它能够确保用户输入的数据符合预设的规范,提高用户体验并减轻服务器端的压力。jQuery的validate插件作为一款强大的表单...

    jquery validate 自动绑定校验规则

    `jQuery Validate` 是一个流行的JavaScript库,用于在前端进行表单验证。这个库极大地简化了网页表单数据的验证过程,使得开发者可以方便地定义验证规则,并为用户提供实时的反馈。下面将详细介绍`jQuery Validate`...

    jquery validate默认错误提示显示位置修改

    ### 修改jQuery Validate默认错误提示显示位置 在网页开发过程中,表单验证是非常重要的一个环节,它不仅能够提高用户体验,还能确保数据的有效性和安全性。jQuery Validate插件是实现表单验证功能的一个强大工具,...

    jquery validate配合struts2简单整改

    《jQuery Validate与Struts2整合应用详解》 在Web开发中,前端验证用户输入的数据是必不可少的一环,jQuery Validate插件就是一款强大的JavaScript验证工具,它可以帮助我们方便地实现表单验证。与此同时,Struts2...

    jquery validate 使用详解

    ### jQuery Validate 插件使用详解 #### 一、概述 jQuery Validate 是一款强大的表单验证插件,基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能,大大提高了用户体验并减少了服务器端的...

    jquery.validate插件remote规则相同值不验证的问题解决办法

    jquery.validate插件remote规则相同值不验证的问题解决办法.方法绝对有效

    jquery的校验规则(jquery.validate)

    `jQuery Validate` 是一个非常流行的 jQuery 插件,用于对网页中的表单进行验证。它提供了丰富的预定义验证规则,帮助开发者轻松实现各种复杂的用户输入验证,从而确保数据的准确性和安全性。以下是对 `jQuery ...

    java使用jquery_validate插件实现文本校验

    在客户端验证中,`jQuery Validate`是一个非常流行和强大的验证插件,它与后端技术如Java相结合,能实现高效且友好的验证机制。 `jQuery Validate`插件是由Jörn Zaefferer开发的,它是jQuery库的一个扩展,用于...

Global site tag (gtag.js) - Google Analytics