使用输入字段的类进行通用表单验证

问题描述 投票:0回答:2

您好,我想知道您是否可以帮助我提供以下主题的一些信息:我想用javascript创建一个通用表单验证类,并为我的输入字段分配适当的类名来进行验证检查。

我怎么能做到这一点?我的意见:

<input type="text" class="alphabeticalValidation" name="Vvehicle"/>

我的验证码:

    function fieldValadation() {
    var errMsg = "";
    var isNumber = $(".numericalValidation");
    var isWord = $(".alphabeticalValidation");
    var regex0 = /^[0-9]+$/;
    var regexA = /^[A-Za-z]+$/;

    // check to see if fields are not empty - if so test the data type
    if (isNumber.length != 0 && isWord.length != 0 ) {


        if (isNumber != regex0) {
            errMsg += "Field can only contain numerical charaters \n"
        }
        if (isWord != regexA) {
            errMsg += "Field can only contain alphabetical characters \n"
        }
    }
    else {
        errMsg += "Fields cannot be empty \n";   
    }
    return errMsg;
}
javascript jquery regex validation
2个回答
0
投票

您可以通过使用类进行验证来轻松实现它。所有你需要做的只是更新你的代码,如下所示 -

$(".numericalValidation").each(function(){
    var isNumber = $(this).val();
    var errMsg = '';
    if (isNumber.length != 0 && isWord.length != 0 ) {
        if (isNumber != regex0) {
            errMsg = "Field can only contain numerical charaters \n"
        }
        if (isWord != regexA) {
            errMsg = "Field can only contain alphabetical characters \n"
        }
    }
    else {
        errMsg = "Fields cannot be empty \n";   
    }
    $(this).parent().find('label').html(errMsg);
 });

0
投票

我通过添加.val()找到了我的查询的解决方案;在调用类之后保持通用意味着我可以将类分配给应该验证某个条件的多个输入字段。

我希望这能帮助将来的某个人。

function fieldValadation() {

    var errmsg = '';    
    var Vehicle = $(".alphabeticalValidation").val();
    var isNumber = $(".numericalValidation").val();

    if (Vehicle != "" && isNumber != "") {
        if (!isNaN(Vehicle)) {
            errmsg += "Field can only contain letters \n";
        }
        if (isNaN(isNumber)) {
            errmsg += "Field can only contain numbers \n";
        }
    }
    else {
        errmsg += "Field cannot be empty \n";
    }

    return errmsg;
}
© www.soinside.com 2019 - 2024. All rights reserved.