JQ验证表单

一、引入jq
二、示例代码

jQuery(document).ready(function(){
    $('#cform img.contact-loader').hide();

    $('#cform').submit(function(){

        //验证信息
        if($('#name').val() == ""){
            $("#name").parent().addClass("error");
            $("#message").html("请填写你的姓名!").show().addClass("error");
            $("name").focus();
            return false;
        }

        if($('#email').val() == ""){
            $("#email").parent().addClass("error");
            $("#message").html("请填写你的邮箱!").show().addClass("error");
            $("#email").focus();
            return false;
        }
        if($('#title').val() == ""){
            $("#title").parent().addClass("error");
            $("#message").html("请填写你的姓名!").show().addClass("error");
            $("#title").focus();
            return false;
        }
        if($('#content').val() == ""){
            $("#content").parent().addClass("error");
            $("#message").html("请填写你的留言!").show().addClass("error");
            $("#content").focus();
            return false;
        }

        var pattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if(!pattern.test($('#email').val())){
            $("#email").parent().addClass("error");
            $("#message").html("邮箱格式不正确!").show().addClass("error");
            $("#email").focus();
            return false;
        }



        var action = $(this).attr('action');

        $("#message").slideUp(750,function() {
            $('#message').hide().removeClass("error");

             $('#submit').attr('disabled','disabled');
            $('#cform img.contact-loader').show();
            $("#cform fieldset").removeClass('error');

            $.post(action, {
                name: $('#name').val(),
                email: $('#email').val(),
                subject: $('#title').val(),
                comments: $('#content').val()
            },
                function(data){
                    document.getElementById('message').innerHTML = data.info;
                    $('#message').slideDown('slow').addClass("success");
                    $('#cform img.contact-loader').fadeOut('slow',function(){$(this).remove();});
                    $('#submit').removeAttr('disabled');
                    if(data.status == 1) {
                        document.getElementById('cform').reset();    
                        $('#cform').slideDown('slow');
                    }
                }
            );
        });

        return false;

    });

});
插件简介:使用HTML标签属性,快速实现常用表单验证功能 JQ表单验证插件 使用方法:$.formValidate(options); version:1.6.0 @param {Object} options @param options.area 验证的区域父级元素,默认 body @param options.msg_type 错误提示类型:alert(自定义函数提示) , return(将错误提示直接返回) @param options.msg_func 自定义错误提示调用的函数,填写自定义提示函数名,插件自动传入参数(错误信息以及自定义参数);默认(alert) @param options.focus 移动焦点到错误元素,默认关闭(false) 插件说明:利用 html 标签属性,表单自动验证;支持 为空、正则匹配、函数、非空匹配等验证 html标签属性说明: 1.vf-cate (可选)元素表单类型,可自动验证;支持:text,number,email,hidden,password,textarea,select,date,checkbox,radio 等 2.vf-type (必填)验证类型[可多个,用 "|" 进行分割],支持:empty(为空验证),reg(正则匹配),func(函数调用),item(元素值比较,例如:item:#pwd 或 item:.pwd),length(长度验证,例 length:10 或 length:10-100)以及其他常用类型:mobile,tel,email,url,number,idcard,password,username,gbk 等 3.vf-msg (必填)验证错误提示[可多个,用 "|" 进行分割,顺序与vf_type对应] 4.vf-func (可选)调用验证的函数,当vf-type中包含 func 时,则必填;插件自动传入当前元素的JQ对象 5.vf-reg (可选)正则验证表达式,当vf-type中包含 reg 时,则必填 6.vf-name (可选)验证规则标识。可将当前规则->设置为全局验证规则(名称后加"/g");在同一页面下,可直接多次使用属性 vf-name 调用已有的全局规则,调用全局规则时无需加"/g" 7.vf-null (可选)非空验证:yes/no;开启后,若数据为空,则跳过当前数据验证 注: 1.验证表单元素,需要添加 class 名 : vf-validate 方开启验证; 2.当使用 vf_func 调用其他验证函数时,会传入“当前元素”;且需要在验证函数中返回验证状态:true(验证成功),其他或false皆为验证失败 * 插件返回值: 1.当 options.msg_type 等于 alert 时:验证成功返回 true , 失败返回 false; 2.当 options.msg_type 等于 return 时:验证成功返回 true , 失败返回 错误信息; 3.当插件发生错误异常,也会直接 return 错误信息。所以判断时,建议以返回true为验证通过,其他皆视为不通过;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值