基于jquery表单验证

function trySubmit(formid) {
    var osubBtn = $(formid).find("a.subBtn");
    var oIsWrong = 1;
    var oIsNull = 1;
    var checkArr = new Array();

    var email = new Object();
    email.obj = $(formid).find("input[name='userEmail']");
    email.reg = /^\w{3,}@\w+(\.\w+)+$/;
    email.wrongStr = 'Please enter the correct email address';
    checkArr.push(email);

    var mobile = new Object();
    mobile.obj = $(formid).find("input[name='mobile']");
    mobile.reg = /^(\+\d{2,3}\-)?\d{11}$/;
    mobile.wrongStr = 'Please enter the correct telephone No.';
    checkArr.push(mobile);

    function checkedStr(obj, reg, wrongStr) {
        if (!reg.test(obj.val())) {
            obj.closest("p").append("<span class='wrongTips'>" + wrongStr + "</span>");
            obj.addClass("wrongBox");
            oIsWrong = 0;
        }
    }

    $(formid).find("input[type='text'],textarea").focus(function () {
        $(this).removeClass('wrongBox');
        $(this).closest("p").find(".wrongTips").remove();
        $(this).addClass('on');
    });

    $(formid).find("input[type='text'],textarea").blur(function () {
        $(this).removeClass('on');
    });

    osubBtn.click(function () {
        var valString=null;
        $(formid).find("input[type='text'].required,textarea.required").each(function () {
            if ($(this).val() == '' || $(this).val() == $(this).attr('defaultval')) {
                $(this).addClass('wrongBox');
                $(this).closest("p").find(".wrongTips").remove().end().append("<span class='wrongTips'>Required Field</span>");
                oIsNull = 0;
            }
        });

        if (!oIsNull) {
            oIsNull = true;
            return false;
        }
        else {
            checkedStr(email.obj, email.reg, email.wrongStr);
            if (!oIsWrong) {
                oIsWrong = true;
                return false;
            } else {

                $(formid).find("input[type='text'],textarea").each(function () {
                    valString += $(this).attr('name') + '=' + $(this).val();
                    //$(this).val($(this).attr('defaultval'));
                });
                return true;
            }
        };
    });
    $(formid).find("input:reset").click(function () {
        $(this).closest("form").find(".defaultTxtBox").css({ 'color': '#aaa' });
        $(this).closest("form").find(".wrongTips").remove();
        $(this).closest("form").find(".wrongBox").removeClass("wrongBox");
    });
}

checkArr ：验证表单内容的信息数组，在这里我只添加了手机和邮箱的验证，如果还有其他要验证的选项，可以自行添加到验证数组里，此数组的结构：

• obj：需要验证信息的元素（文本框等）
• reg：正则表达式
• wrongStr：验证失败时提示的信息

不能为空的表单元素需要设置为required类

另外如果在文本框区域内需要设置默认的提示文字，需要配合以下函数，并给元素添加defaultval属性，内容设置为需要提示的文字内容

function defaultTxtBox(obj) {
    $(obj).focus(function () {
        if ($(this).val() == $(this).attr('defaultval')) $(this).val('');
        $(this).css({ 'color': '#333' });
    });
    $(obj).blur(function () {
        if ($(this).val() == '') {
            $(this).val($(this).attr('defaultval'));
            $(this).css({ 'color': '#aaa' });
        }

    });
}

 

演示效果