在Bootstrap Modal中对输入调用jQuery函数

Calling jQuery functions on inputs in Bootstrap Modal

本文关键字:调用 jQuery 函数 输入 Bootstrap Modal      更新时间:2023-09-26

我有两个jQuery函数,它们根据正则表达式验证输入字段。当我在页面上嵌入表单时,它们工作得很好。但是,当我尝试在Bootstrap Modal中使用它们时,它们不起作用。

任何想法?

<input class="form-control input-lg validate-email" id="email" name="email" minlength="2" type="text"  placeholder="Email">
 $('.validate-email').on('input', function() {
    var input = $(this).val();
    var regex = new RegExp(/^((([a-z]|'d|[!#'$%&''*'+'-'/='?'^_`{'|}~]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])+('.([a-z]|'d|[!#'$%&''*'+'-'/='?'^_`{'|}~]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])+)*)|(('x22)(((('x20|'x09)*('x0d'x0a))?('x20|'x09)+)?((['x01-'x08'x0b'x0c'x0e-'x1f'x7f]|'x21|['x23-'x5b]|['x5d-'x7e]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(''(['x01-'x09'x0b'x0c'x0d-'x7f]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF]))))*((('x20|'x09)*('x0d'x0a))?('x20|'x09)+)?('x22)))@((([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|'d|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.)+(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])|(([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])([a-z]|'d|-|'.|_|~|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])*([a-z]|['u00A0-'uD7FF'uF900-'uFDCF'uFDF0-'uFFEF])))'.?$/i);
    var is_email = regex.test(input);
    if(is_email){
        $(this).removeClass("invalid").addClass("valid");
    } else{
        $(this).removeClass("valid").addClass("invalid");
    }

});

同样,这段代码只适用于表单在页面上的情况,而不适用于表单在Bootstrap Modal中的情况。

还有一个细节,validinvalid是CSS类,可以改变字段的背景颜色。如果我跳过jQuery,只是硬编码一个无效的类在<input>它显示无效的类。所以我知道这是jQuery

function IsEmail(email) {

var regex =/^ ([a-zA-Z0-9 _.+-])+'@(([ a-zA-Z0-9 -]) +) + ([a-zA-Z0-9] {2,4}) + $/;

返回regex.test(电子邮件);}