jquery插件-表单验证插件-rules

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>