jquery - Jquery Validation Plugin 在 Chrome 中工作,但在 Mozilla 中不工作
问题描述
我在 Django 应用程序中有一个表单,它的验证在 Chrome 上完美运行,但我无法让它在 Mozilla 上运行。我加载了这个版本的 jquery 和 jquery 验证插件
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.1/jquery.validate.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.validate/1.19.1/additional-methods.js"></script>
我的 jquery 验证代码如下所示:
jQuery.validator.addMethod("phoneValidator", function(value, element) {
return this.optional(element) || /^\+?\d?\(?([\d]{3}?)\)?-?([\d]{3}?)-?([\d]{4,5})$/.test(value);
}, 'Please enter a valid phone number. E.g. 123-456-7890');
jQuery.validator.addMethod("zipValidator", function(value, element) {
return this.optional(element) || /(?i)^[a-z0-9][a-z0-9\- ]{0,10}[a-z0-9]$/.test(value);
}, 'Please enter a valid zip code. E.g. 80111 or 1234-80111');
jQuery.validator.addMethod("dateValidator", function(value, element) {
return this.optional(element) || /^(0[1-9]|1[0-2])[\/|-](0[1-9]|1\d|2\d|3[01])[\/|-]([1-9]\d{3})$/.test(value);
}, jQuery.validator.format('Please enter a valid date in mm/dd/yyyy format.'));
jQuery.validator.addMethod("dateNotInFutureValidator", function(value, element) {
//replace all dashes with /
value = value.replace(/-/g, '\/');
value = value.split('/');
var today = new Date();
var month = today.getMonth() + 1; //getMonth is 0-indexed
var day = today.getDate();
var year = today.getFullYear();
// console.log(month, day, year);
// console.log(value[0], value[1], value[2]);
return this.optional(element) || (value[2] == year && value[0] == month && value[1] <= day) || (value[2] == year && value[0] < month) || (value[2] < year);
}, jQuery.validator.format('Please enter a date that is not in the future.'));
jQuery.validator.addMethod("allChars", function(value, element) {
return this.optional(element) || /[a-zA-Z]+$/.test(value);
}, 'This field may only contain characters.');
jQuery.validator.addMethod("allHebrew", function(value, element) {
return this.optional(element) || /^[\u0590-\u05FF]+$/.test(value);
}, 'This field may only contain Hebrew characters.');
FORM_RULES = {
verify_email: { equalTo: '#id_email' },
'{{soldier.date_of_birth.name }}' : {'dateValidator': true, 'dateNotInFutureValidator':true},
'{{soldier.legal_first_name.name}}' : 'allChars',
'{{soldier.legal_last_name.name}}' : 'allChars',
'{{soldier.naaleh_selah_choice.name}}' : {
required: function(element){
return $('#id_naaleh_selah_bool_0').val() == 1
}},
accept_checkbox: {required: true}
};
FORM_MESSAGES = {
verify_email: {equalTo: 'Please enter the same value as the Email field.'},
accept_checkbox: {required: 'You must accept the terms and conditions to continue.'}
};
$('#intake_form').validate({
rules: FORM_RULES,
messages: FORM_MESSAGES,
errorPlacement: function(error, element)
{
if ( element.is(":radio"))
{
error.insertAfter( element.parent().parent().parent() );
}
else if (element.attr("id") === "accept_checkbox")
{
error.insertAfter(element.parent());
}
else { // This is the default behavior of the script
error.insertAfter( element );
}
}
});
Mozilla Firefox 上没有任何验证消息显示给我,它让我无需填写必填字段即可提交表单。我确实在 Mozilla 的控制台中看到以下错误:
SyntaxError: invalid regexp group
但我不确定如何处理它,因为它说错误出现在 1:1:1 - html 页面源代码中的空白行。
我确实在某处读过 Firefox 不支持后向正则表达式语法,并且 jquery 验证插件确实允许使用正则表达式,所以这两者可能不兼容?有没有办法解决这个问题?
解决方案
问题是我的 zipValidator(发布的验证代码中的第二个方法调用)有一个 Firefox 认为无效的正则表达式。其他浏览器支持这种(?i)
表示法(不区分大小写),但 Firefox 不支持。一旦我更改了那个正则表达式(只是在每个 az 之后添加了 AZ),所有的验证、显示和隐藏都可以使用 jquery 进行。
推荐阅读
- javascript - 单击后响应式汉堡菜单不会消失
- spring-boot - 在 Spring 中从 .properties 文件中访问值
- javascript - 嵌套元素中的 onClick 事件
- grails - Grails 3.3.2 扩展“NavigableMapConfig”并覆盖“get”方法
- postgresql - 如果没有关联,则在多对多关系中从表中删除所有记录
- html - Response.Redirect 卡在 Session_Start 中的 302 无限循环
- javascript - 为什么我需要为动作创建者添加花括号?
- azure-functions - 如何在 IoT 中心消息上接收“用户 ID”
- reactjs - 键盘不会出现每个焦点
- javascript - “StyleSheet”类型上不存在属性“insertRule”和“deleteRule”