代码之家 › 专栏 › 技术社区 › Husna

使用jquery基于属性类型的表单验证

validation html5 jquery javascript

-1

Husna · 技术社区 · 8 年前

我正在处理表单验证,我想一次基于attr(type)验证所有文本字段。像这样,我想验证

例子

 if($(myForm + " input").attr("type") == "email") {
// Validate Email Here
 }

我的代码运行良好,但在这里,如果我再添加一个额外的字段,我就不能执行多个验证了。有谁能帮助我如何进行上面提到的验证? 任何帮助都将不胜感激

var Validator = function(form) {
    
    this.form = $(form);
    
    var Elements = {
        name: {
            selector: $('input[type=text]'),
            reg: /^[a-zA-Z]{2,20}$/
        },

        email: {
            selector: $('input[type=email]'),
            reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i
        },

        message: {
            selector: $('textarea'),
            reg: /^\s+$/
        }
    };

    var handleError = function(element, message) {
        element.addClass('input-error');
        var $err_msg = element.parent('div');
        var error = $('<div class="error"></div>').text(message);
        error.appendTo($err_msg);
        element.keyup(function() {
            $(error).fadeOut(1000, function() {
                element.removeClass('input-error');
            });
        });

    };

    this.validate = function() {

        this.form.submit(function(e) {

            for (var i in Elements) {

                var type = i;
                var validation = Elements[i];

                switch (type) {

                case 'name':
                    if (!validation.reg.test(validation.selector.val())) {
                        handleError(validation.selector, 'Not a valid name.');
                    }
                    break;
                case 'email':
                    if (!validation.reg.test(validation.selector.val())) {
                        handleError(validation.selector, 'Not a valid e-mail address.');
                    }
                    break;
                case 'message':
                    if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                        handleError(validation.selector, 'Message field cannot be empty.');
                    }
                    break;
                default:
                    break;


                }

            }

            e.preventDefault();
        });

    };
};

var validator = new Validator('#test');
validator.validate();

body {
    background: #fff;
    color: #333;
    font: 76% Verdana, sans-serif;
}

form {
    margin: 1em 0 0 2em;
    width: 90%;
}

fieldset {
    margin: 0;
    border: 1px solid #ccc;
    padding-bottom: 1em;
}

legend {
    font-weight: bold;
    text-transform: uppercase;
}


label {
    float: left;
    width: 5em;
    padding-right: 2em;
    font-weight: bold;
}
div {
	margin-bottom: 30px;
}
input {
    font: 1em Verdana, sans-serif;
}

fieldset ul li input {
    float: left;
    width: 120px;
    border: 1px solid #ccc;
}

textarea {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    font: 1em Verdana, sans-serif;
}

form p {
    margin: 0;
    padding: 0.4em 0 0 7em;
}

form p input {
    background: #666;
    color: #fff;
    font-weight: bold;
}


div.error {
    clear: left;
    margin-left: 5.3em;
    color: red;
    padding-right: 1.3em;
    height: 100%;
    padding-bottom: 0.3em;
    line-height: 1.3;
}

.input-error {
    background: #ff9;
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="test">

<fieldset>

<legend>Contact information</legend>


<div>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" />
</div>
	
<!--<div>
    <label for="lastname">LastName:</label>
    <input type="text" name="lastname" />
</div>-->

<div>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" />
    
</div>

<div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" cols="30" rows="15"></textarea>
</div>

<p><input type="submit" name="send" id="send" value="Send" /></p>

</fieldset>


</form>

1 回复 | 直到 8 年前

cjs1978 8 年前

编辑:工作小提琴, https://jsfiddle.net/oL4dr0fa/5/ -并在提交处理程序中添加了一些简单的功能,以便在没有错误的情况下实际提交表单。

这是js部分,re。我在上面的评论:

    var Validator = function(formObject) {
    this.form = $(formObject);

    var Elements = {
        name: {
            reg: /^[a-zA-Z]{2,20}$/,
            error: "Not a valid name.",
        },

        email: {
            reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
            error: "Not a valid e-mail address.",
        },

        message: {
            reg: /^(?!\s*$).+/,
            error: "Message field cannot be empty.",
        },
    };

    var handleError = function(element, message) {
        element.addClass('input-error');
        var $err_msg = element.parent('div');
        var error = $('<div class="error"></div>').text(message);
        error.appendTo($err_msg);
        element.keyup(function() {
            $(error).fadeOut(1000, function() {
                element.removeClass('input-error');
            });
        });

    };

    this.validate = function() {
            var errorCount = 0;
        this.form.find("input, textarea").each(function(index, field){
            var type = $(field).data("validation");
            var validation = Elements[type];
            if (validation){
                if (!validation.reg.test($(field).val())){
                        errorCount++;
                    handleError($(field), validation.error);
                }            
            }
        })
            return errorCount == 0;
    };
};

$(function(){
    $("form#test").on("submit", function(event){
        //event.preventDefault();
        return new Validator(this).validate(); // "this" here refers to the form

    })
})

下面是编辑过的带有数据属性的html:

    <form action="#" method="post" id="test">

<fieldset>

<legend>Contact information</legend>


<div>
    <label for="name">Firstname:</label>
    <input type="text" name="firstname" id="firstname" data-validation="name" />
</div>


<div>
    <label for="lastname">Lastname:</label>
    <input type="text" name="lastname" id="lastname" data-validation="name" />
</div>

<div>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" data-validation="email"/>

</div>

<div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" cols="30" rows="15" data-validation="message"></textarea>
</div>

<p><input type="submit" name="send" id="send" value="Send" /></p>

</fieldset>


</form>