html5表单验证

淩亂°似流年 2022-05-31 05:28 171阅读 0赞

[jQuery Validate学习网址][jQuery Validate]  
挺好用的一款插件,可以自定义验证方法

$("#form_details").validate({
            rules:{
                my_name:{
                    required: true
                },
                tel:{
                    required: true,
                    check_tel: true
                },
                my_id:{
                    required: true,
                    check_my_id: true
                },
                my_address:{
                    required: true
                },
                zip_code:{
                    required: true,
                    check_zip_code: true
                },
                site_address:{
                    required: true
                },
                game:{
                    required: true
                },
                agree_rules:{
                    required: true
                },
                my_date:{
                    required: true
                },
                my_place:{
                    required: true
                },
                site_id:{
                    required: true,
                    check_site_id: true
                },
                fault_details:{
                    required: true
                },
                change_code:{
                    required: true
                },
                group_num:{
                    required: true,
                    min: 2
                },
                img_num:{
                    required: true
                }
            },
            messages:{
                my_name:{
                    required: "请输入姓名"
                },
                tel:{
                    required: "请输入电话号码"
                },
                my_id:{
                    required: "请输入身份证号码"
                },
                my_address:{
                    required: "请输入通信地址"
                },
                zip_code:{
                    required: "请输入邮箱"
                },
                site_address:{
                    required: "请输入要申请的网点地址"
                },
                game:{
                    required: "请选择申请销售游戏类型"
                },
                agree_rules:{
                    required: "您尚未同意相关条款"
                },
                my_date:{
                    required: "请选择时间"
                },
                my_place:{
                    required: "请填写通讯地址"
                },
                site_id:{
                    required: "请填写网点号"
                },
                fault_details:{
                    required: "请描述故障情况"
                },
                change_code:{
                    required: "请输入兑换码"
                },
                group_num:{
                    required: "请输入团体人数",
                    min: "团体人数至少为2人"
                },
                img_num:{
                    required: "请上传相关图片"
                }
            },
            errorPlacement: function (error, element) {  //指定错误信息位置
                if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
                    var eid = element.attr('name'); //获取元素的name属性
                    error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
                } else {
                    error.insertAfter(element);
                }
            }
        });

[jQuery Validate]: http://www.runoob.com/jquery/jquery-plugin-validate.html