不用jquery插件，自己用jquery写的表单验证！

Question

例如：让用户输入：用户名、密码、确认密码等。不采用formValidator等这样的插件，自己手写出来的表单验证模式！求大仙们给我写一个demo

Answer 1

我自己写了一个通过XML方式 配置来实现 的
XML如下<?xml version="1.0" encoding="utf-8" ?>
<Root>
  <Data Name="Product">
    <Item Name="SKU"  IsNull="true"          Reg=""   Tip="必填项，不能为空"></Item>
    <Item Name="Mobile" IsNull="true"        Reg="^\d{11,}$" Tip="必填项，请输入合法的手机号码" ></Item>
    <Item Name="ProductName" IsNull="false"     Reg="^\d{5,}$" Tip="非必填项，长度必须大于5位"   ></Item>
  </Data>
</Root>

Answer 2

(function ($) {
    $(document).ready(function () {
        $('body').append('<table id="tipTable" class="tableTip"><tr><td  class="leftImage"></td> <td class="contenImage" align="left"></td> <td class="rightImage"></td></tr></table>');
        var dataName = "Product";
        var checkSubmit = (function () {
            $.ajax({
                url: "validate.xml",
                dataType: "xml",
                type: 'get',
                error: function (xml) {
                    alert('Error loading XML document' + xml);
                },
                success: function (xml) {                    $(xml).find("Data[Name='" + dataName + "']").find("Item").each(function () {
                        var name = $(this).attr("Name");                        var isNull = $(this).attr("IsNull");
                        var reg = $(this).attr("Reg");
                        var tip = $(this).attr("Tip");
                        //给对应的元素添加focus事件以及blur事件
                        $("#" + name).mouseover(function () {
                            if (tip != "") {
                                $('#tipTable').css({ left: $.getLeft(this) + 'px', top: $.getTop(this) + 'px' });
                                $('.contenImage').html(tip);
                                $('#tipTable').fadeIn("fast");
                                //  settipTableOut(name);
                            }
                        }).blur(function () {
                            //根据具体的逻辑判断当前 元素是否输入正确
                            //如果不允许为空
                            if (isNull == "true") {
                                //如果条件不允许为这且值为空
                                if ($("#" + name).val() == "") {                                    settipTableOut(name);                                } else {
                                    //如果条件不允许为空且值也不为空
                                    if (reg != "") {
                                        //表示需要启动正则进行验证                                        var regex = new RegExp(reg);
                                        if (!regex.test($("#" + name).val())) {
                                            //错误提示
                                            settipTableOut(name);                                        } else {
                                            //去除样式
                                            settipTableIn(name);
                                        }
                                    } else {
                                        settipTableIn(name);
                                    }
                                }                            } else {
                                //如果条件为空，且reg 不为空则表示要验证
                                if ($("#" + name).val() != "" && reg != "") {
                                    var regex = new RegExp(reg);
                                    if (!regex.test($("#" + name).val())) {
                                        //错误提示
                                        settipTableOut(name);                                    } else {
                                        settipTableIn(name);
                                    }
                                } else {
                                    settipTableIn(name);
                                }
                            }
                        });
                    });
                }
            });        });
        var settipTableOut = (function (name) {
            $("#" + name).removeClass('tooltipinputok').addClass('tooltipinputerr');
            $('#tipTable').fadeOut("fast");        });
        var settipTableIn = (function (name) {
            $("#" + name).removeClass('tooltipinputerr').addClass('tooltipinputok');
        });        checkSubmit("Product");
        $("form").submit(function () {            $.ajax({
                url: "validate.xml",
                dataType: "xml",
                type: 'get',
                error: function (xml) {
                    alert('Error loading XML document' + xml);
                },
                success: function (xml) {
                    var isSubmit = true;
                    $(xml).find("Data[Name='" + dataName + "']").find("Item").each(function () {
                        var name = $(this).attr("Name");
                        var isNull = $(this).attr("IsNull");
                        var reg = $(this).attr("Reg");
                        var tip = $(this).attr("Tip");
                        readXmlStatus = true;
                        //给对应的元素添加focus事件以及blur事件
                        if (tip != "") {
                            $('#tipTable').css({ left: $.getLeft(this) + 'px', top: $.getTop(this) + 'px' });
                            $('.contenImage').html(tip);
                            $('#tipTable').fadeIn("fast");
                            //  settipTableOut(name);
                        }                        //根据具体的逻辑判断当前 元素是否输入正确
                        //如果不允许为空
                        if (isNull == "true") {
                            //如果条件不允许为这且值为空
                            if ($("#" + name).val() == "") {
                                settipTableOut(name);
                                isSubmit = false;
                            } else {
                                //如果条件不允许为空且值也不为空
                                if (reg != "") {
                                    //表示需要启动正则进行验证
                                    var regex = new RegExp(reg);
                                    if (!regex.test($("#" + name).val())) {
                                        //错误提示
                                        settipTableOut(name);
                                        isSubmit = false;
                                    } else {
                                        //去除样式
                                        settipTableIn(name);
                                    }
                                } else {
                                    settipTableIn(name);
                                }
                            }                        } else {
                            //如果条件为空，且reg 不为空则表示要验证
                            if ($("#" + name).val() != "" && reg != "") {
                                var regex = new RegExp(reg);
                                if (!regex.test($("#" + name).val())) {
                                    //错误提示
                                    settipTableOut(name);
                                    isSubmit = false;
                                } else {
                                    settipTableIn(name);
                                }
                            } else {
                                settipTableIn(name);
                            }
                        }
                    });                    if (isSubmit == true)
                        alert("可以提交表单");
                    else {
                        alert("不可以提交表单");
                    }
                }
            });
            return false;
        });        $.extend({
            getWidth: function (object) {
                return object.offsetWidth;
            },            getLeft: function (object) {
                var go = object;
                var oParent, oLeft = go.offsetLeft;
                while (go.offsetParent != null) {
                    oParent = go.offsetParent;
                    oLeft += oParent.offsetLeft;
                    go = oParent;
                }
                return oLeft;
            },            getTop: function (object) {
                var go = object;
                var oParent, oTop = go.offsetTop;
                while (go.offsetParent != null) {
                    oParent = go.offsetParent;
                    oTop += oParent.offsetTop;
                    go = oParent;
                }
                return oTop + $(object).height() + 5;
            },            onsubmit: true
        });
    });