jQuery在提交时验证多个输入

彼得

我正在尝试创建一个jquery函数,以在提交表单之前验证用户输入,但它向我显示一个错误TypeError: $ival.val(...) is null,我看不到我在做什么错。我也不想使用jQuery validate library,我想创建自己的简单验证。

验证方式

function checkValidate(input_el){
    var status_check = true;
    var $ival = $(input_el);
        if(($(input_el).attr('type') == 'email' || $(input_el).attr('name') == 'email') && $ival.val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
            status_check = false;
        } else {
            var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
            if($(input_el).attr('type') == 'tel' && (!filter.test($ival.val().trim()) || $(input_el).val().trim() < 8)){
                status_check = false;
            } else {
                if($ival.val().trim() < 1) {
                    status_check = false;
                }
            }
        }   
    return status_check;
}

function setValidation(input) {
    var thisAlert = $(input).parent();
    $(input).addClass('inputHasError');
}

岗位职能

function postBusinessSetup(self, check) {
    if(check) {
        console.log('YES');
    } else {
        console.log('NO');
    }
}

提交验证码

$(document).on('submit', '#ExampleForm', function(e) {
    var inputs = $('.required-data', this);
    var check = true;
    var self = this;
    for(var i=0; i<inputs.length; i++) {
        if(checkValidate(inputs[i]) == false) {
            setValidation(inputs[i]);
            check = false;
        }
    }
    postBusinessSetup(this, check);
    e.preventDefault();
});

HTML

<form id="ExampleForm">
    <input type="text" class="required-data"/>
    <input type="email" class="required-data"/>
    <input type="tel" class="required-data"/>
    <input type="url" class="required-data"/>
    <select class="required-data"><option value="hello">hello</option></select>
</form>
吉罗达

输入为空时功能调整可能导致错误。

$ival.val().trim()

您可以将其存储在变量中,也可以真正优化代码

var $val = $ival.val() ? $ival.val().trim() : ''

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章