ruels方法

1说明：查看、新增、移除一个表单控件的验证规则

2使用：

　　表单控件.rules();

　　参数：

　　　　rules()

　　　　　　返回元素的验证规则

　　　　rules('add',rules)

　　　　　　增加验证规则

　　　　rules('remove',rules)

　　　　　　删除验证规则

valid()方法

1、介绍

　　检查表单是否验证通过

2、使用

　　表单jQuery对象.valid()

增加的选择器

：blank

　　选择所有没有值或者值为空白的的表单对象

:filled

　　选择所有非空的表单空间，和上面的相反

：unchecked

　　选择所有没有被选中的控件，与check选择器相反

　　

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>rules</title>

<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>

<script type="text/javascript" src="../js/validation/jquery.validate.js"></script>

<script type="text/javascript" src="../js/validation/messages_zh.js"></script>

<script type="text/javascript">

    $(document).ready(function()

    {

        var validator = $("#form1").validate({

            rules: {

                field1:{

                    required:true,

                    rangelength:[4,6]

                }

            },

            messages:{

                field1:{

                    required:'field1不能为空',

                    rangelength:'field1的长度必须子{0}与{1}之间'

                    /*{0}取的是上述属性的第一个值，{1}取的是上述属性的第二个值  */

                }

            }

        });

        console.log($('#form1 input:eq(0)').rules());

        //操作类型，规则

        $("button.add").click(function(){

        $('#form1 input:eq(0)').rules('add',{

            min:10,

            max:2000});

            });

        $("button.remove").click(function(){

            //去掉多条验证规则时用空格隔开

        $('#form1 input:eq(0)').rules('remove','rangelength required');

            });

        //获取表单是否通过

        console.log($('#form1').valid());

    });

    //模板方法，占位符

    ///alert(template('小明','皮卡球'))

</script>

<style type="text/css">

form {

    margin: 10px 100px 10px 100px;

}

</style>

</head>

<body>

    <form id="form1">

        <div>

            field1:<input type="text" name="field1" />

        </div>

        <div>

             <input type="submit" name="submit" value="submit"/>

        </div>

    </form>

    <button class="add">rule_add</button>

    <button class="remove">rule_remove</button>

</body>

</html>

jquery插件-表单验证插件-rules的更多相关文章

  1. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  2. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  3. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  4. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  5. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  6. jQuery Validate 表单验证插件----自定义校验结果样式

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  7. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  8. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  9. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  10. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

随机推荐

  1. html post和get的区别

    一直以来,都对这两个概念有一个感性的认识,今天总结一下: 1.Get是用来从服务器上获得数据,而Post是用来向服务器上传递数据. 2.Get将表单中数据的按照variable=value的形式,添加 ...

  2. BZOJ 3110 【Zjoi2013】 K大数查询

    Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c如果是2 a b c形式,表示询问从第a个位置到第b个位置 ...

  3. Scrapy 爬虫

    Scrapy 爬虫 使用指南 完全教程   scrapy note command 全局命令: startproject :在 project_name 文件夹下创建一个名为 project_name ...

  4. C语言 自动修改文件名小程序

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...

  5. 前后端分离工具之ftl-server

    文章来源:https://www.npmjs.com/package/ftl-server 源代码可参考:https://github.com/szmtcjm/ftl-server/blob/mast ...

  6. PhoneGap: Android 自定义组件

    Hello Core Demo Plugin Development(组件部署): http://docs.phonegap.com/en/2.0.0/guide_plugin-development ...

  7. jQuery经典学习笔记

    1.层次选择器: $("div> span") 获取div下的span元素 $(".one + div") 获取class为one的下一个div 2)过滤 ...

  8. .net框架中少有人知的扩展cmod

    最近在利用metadata api抽取.net的原数据信息,发现了不少“坑”,也发现了不少常年用着c#的人都不知道的扩展. 说到.net原数据的可扩展性,第一个让人能想到的就是CustomAttrib ...

  9. Cadence Allegro元件封装制作流程

    (本文为转载,原文出处不详) 引言 一个元件封装的制作过程如下图所示.简单来说,首先用户需要制作自己的焊盘库Pads,包括普通焊盘形状Shape Symbol和花焊盘形状Flash Symbol:然后 ...

  10. jquery插件之jquery-validation

    equalTo方法: equalTo: function( value, element, param ) { // Bind to the blur event of the target in o ...