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

最新推荐文章于 2024-07-12 09:36:48 发布

afei2530

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量106

点赞数

文章标签： javascript ViewUI

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

版权

<!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/additional-methods.js"></script>
<script type="text/javascript" src="../js/validation/messages_zh.js"></script>


<script type="text/javascript">
     
    $(document).ready(function()
    {
         $("#register").validate({
            submitHandler:function(){
                console.log("恭喜你验证成功");
                return true;
            },
            invalidHandler:function(event,validator){
                console.log('对不起，您有'+validator.numberOfInvalids()+'个验证项没有通过');
            },
            rules:{
                username:{
                    required:true,
                    rangelength:[2,6]
                },
                sex:{
                    required:true
                },
                email:{
                    required:true,
                    email:true
                },
                'hobby[]':{
                    required:true,
                    minlength:2
                },
                fruit:{
                    required:true,
                    minlength:2
                    //最少勾选两个,minlength当用在text的input时表示输入两个字符,
                    //用在checkbox，select等可以多选的控件，则表示至少选几个
                },
                photo:{
                    required:true,
                    extension:'jpg|jpeg|gif|png'
                },
                agreement:{
                    required:true
                }
            },
            errorPlacement:function(error, element){
                //也可以添加定位，然后让错误提示出现在input的上部，或者下部
                console.log($(element).attr("name"));
                var attrName = $(element).attr("name");
                //alert(attrName);
                if (attrName=='sex'||attrName=='hobby[]'||attrName=='agreement') {
                    //重新放置错误的位置，如果没有这个将会在地一个选项后面
                    $(element).parent().append(error);
                }
                else
                {
                    error.insertAfter(element);    
                }
                
            },
            messages:
            {
                username:{
                    required:'亲，用户名必须填写',
                    rangelength:'亲，用户名的长度必须在{0}到{1}之间'
                },
                sex:{
                    required:'亲，性别必须填'
                },
                email:{
                    required:'亲，email必须填写',
                    email:'亲，添加一个正确的邮箱地址'
                },
                'hobby[]':{
                    required:'亲，爱好必须选',
                    minlength:'亲，至少选择两个爱好'
                },
                fruit:{
                    required:'亲，水果的爱好必须填哦',
                    minlength:'亲，至少选择两种喜欢的水果'
                    //最少勾选两个,minlength当用在text的input时表示输入两个字符,
                    //用在checkbox，select等可以多选的控件，则表示至少选几个
                },
                photo:{
                    required:'亲，你的照片也给我看看呗',
                    extension:'图片格式仅支持jpg|jpeg|gif|png'
                },
                agreement:{
                    required:'那个啥，协议是必须同一的，你懂得'
                }
            },
            highlight:function(element,errorClass,validClass){
            //这个是控制表单中input的样式的
            //如果什么都不写，那么默认error样式的就没有了
            //如果写了highlight那么就认为要用自己的css样式，同时errorPlacement加上的就不再
            //element上使用了
            //去掉ok的class
            $(element).css("border-color",'red');
            $(element).parents("#register .row").find("."+errorClass).removeClass("ok");
            },
            success:function(label,element){
                label.addClass("ok");
                $(element).css("border-color",'#ccc');
                //这个在再次验证时不会自动去掉，需要手动去掉
            }
        
            
            });
            
        
    });
    //模板方法，占位符
     
    ///alert(template('小明','皮卡球'))
</script>
<style type="text/css">
    #register {
        border:1px solid #cacaca;
        font-size: 13px;
        margin: 100px auto;
        padding: 35px 10px 20px 30px;
        width:75%;
    }
    .row{
        margin: 10px 0;
    }
    #register div.row input.text{
        width: 280px;
        height: 18px;
        border:1px solid #ccc;
    }
    /*有了这个error class 这个就会就会默认加到input和错误提示的标签上*/
    .error {
        background: url('../img/small.png') no-repeat -20px -40px;
        padding-left:  20px;
        margin-left:    20px;
        
    }
    .ok{
        background: url('../img/small.png') no-repeat -40px -20px;
        padding-left:  20px;
        margin-left:    20px;
    }
</style>
</head>
<body>
    <form id="register">
        
        <div class="row">
            用户名: <input type="text" name="username" class="text"/>
        </div>
        <div class="row">
            性别: <input type="radio" name="sex" />男
                  <input type="radio" name="sex" />女
        </div>
        <div class="row" >
            邮箱: <input type="text" name="email" class="text"/>
        </div>
        <div class="row">
            体育爱好:
            <input type="checkbox" name="hobby[]" value="1"/>篮球
            <input type="checkbox" name="hobby[]" value="2"/>足球
            <input type="checkbox" name="hobby[]" value="3"/>游泳
            <input type="checkbox" name="hobby[]" value="4"/>跑步
            <input type="checkbox" name="hobby[]" value="5"/>跳舞
            <input type="checkbox" name="hobby[]" value="6"/>武术
        </div>
        <div class="row">
            水果爱好: <select size="3" multiple="multiple" name="fruit">
                        <option>苹果</option>
                        <option>李子</option>
                        <option>香蕉</option>
                        <option>橘子</option>
                        <option>草莓</option>
                    </select>
        </div>
        <div class="row">
            头像: <input type="file" name="photo" />
        </div>
        <div class="row">
            注册协议: <input type="checkbox" name="agreement" />同意
        </div>
     
        <div class="row">
             <input type="submit" name="submit" value="submit"/>
        </div>
    </form>
     
</body>
</html>

效果图

转载于:https://www.cnblogs.com/rocky-AGE-24/p/5272778.html

afei2530

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件-表单验证插件-demo

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>rules</title><script type="text/javascript" src="../js/jquery-1.12.1.js"></script&...
复制链接

扫一扫