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

最新推荐文章于 2023-08-11 16:30:25 发布

afei2530

最新推荐文章于 2023-08-11 16:30:25 发布

阅读量329

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rocky-AGE-24/p/5271670.html

版权

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>