Chrome의 눈에 띄지 않는 유효성 검사는 dd / mm / yyyy로 유효성을 검사하지 않습니다.
다른 브라우저에서 날짜 선택기를 사용하여 가능한 가장 간단한 시나리오를 사용하려고합니다. 나는 내가 아주 간단한 일을 잘못된 방식으로하고 있다고 생각하지만 많은 수색 후에도 여전히 해결책을 찾지 못했습니다. 아래는 내가 시도한 것을 나타내는 샘플 코드입니다.
Chrome (v12.0.742.122)을 사용하고 2011 년 8 월 13 일과 같은 선택기에서 날짜를 선택하면 형식을 'dd / mm /로 명시 적으로 지정 했음에도 불구하고 jQuery 유효성 검사 논리가 페이지 제출을 허용하지 않습니다. yy '.
형식을 'dd / M / yy'로 변경하고 2011 년 8 월 13 일과 같은 날짜를 선택하면 Chrome에서 작동하지만 IE (v8.0.7600.16385)에서는 제출하지 않습니다. FireFox (v3.6.18)에서는 두 가지 형식이 모두 작동합니다.
Chrome에서 'dd / mm / yy'의 날짜 형식을 지원하려면 어떤 유효성 검사 스크립트가 필요합니까?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: 'dd/mm/yy' });
$.validator.addMethod("dateRule", function(value, element) {
return true;
},
"Error message");
});
</script>
</head>
<body>
<form>
Date: <input type="text" name="myDate" class="date dateRule" />
<input type="submit" />
</form>
</body>
</html>
4 시간 후 마침내 나는 답을 우연히 발견했다 . 어떤 이유로 Chrome은 IE와 FireFox가 합리적이고 OS의 지역 설정을 사용할 수있는 미국 날짜 형식을 사용하는 경향이있는 것 같습니다.
jQuery.validator.methods["date"] = function (value, element) { return true; }
https://github.com/jquery/globalize에서 제공되는 Globalize.js 플러그인을 사용할 수 있습니다.
그런 다음 웹 사이트의 기본 스크립트 파일에서 validate 메소드를 다음과 같이 재정의하기 만하면됩니다 (나중에 업데이트 할 수 있으므로 jquery.validate.js 라이브러리 파일을 편집하지 마십시오).
$.validator.methods.date = function (value, element) {
return this.optional(element) || Globalize.parseDate(value, "d/M/y", "en");
}
파티에 조금 늦었다는 것을 알고 있지만 여기에 영국 형식 날짜를 허용하지 않는 Chrome 유효성 검사에 사용한 솔루션이 있습니다. 간단한 플러그 앤 플레이 유효성 검사로 플러그인에 의존하거나 파일을 수정하지 않습니다. 1900 년 1 월 1 일에서 2999 년 31 월 31 일 사이의 모든 날짜를 허용하므로 미국 또는 영국 형식입니다. 분명히 과거의 잘못된 날짜가 있지만 정규식을 마음껏 조정할 수 있습니다. 이것은 서버 측 유효성 검사를 통해 사이트의 트래픽이 적은 영역에서 사용될 것이므로 내 요구를 충족했습니다. 문제의 사이트 영역은 ASP.net MVC로 구축되었습니다.
jQuery.validator.methods.date = function(value, element) {
var dateRegex = /^(0?[1-9]\/|[12]\d\/|3[01]\/){2}(19|20)\d\d$/;
return this.optional(element) || dateRegex.test(value);
};
이 문제는 JQuery 팀에서 제기 된 것 같습니다.
https://github.com/jzaefferer/jquery-validation/issues/153
현재 해결 방법은 additional-methods.js 에서 dateITA를 사용하는 것 같습니다 .
다음과 같이 보입니다.
jQuery.validator.addMethod(
"dateITA",
function(value, element) {
var check = false;
var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
if( re.test(value)){
var adata = value.split('/');
var gg = parseInt(adata[0],10);
var mm = parseInt(adata[1],10);
var aaaa = parseInt(adata[2],10);
var xdata = new Date(aaaa,mm-1,gg);
if ( ( xdata.getFullYear() == aaaa )
&& ( xdata.getMonth () == mm - 1 )
&& ( xdata.getDate() == gg ) )
check = true;
else
check = false;
} else
check = false;
return this.optional(element) || check;
},
"Please enter a correct date"
);
해당 유효성 검사기를 추가하면 datepicker를 '.dateITA'클래스에 연결할 수 있습니다.
지금까지 이것은 Chrome 에서이 어리석은 문제를 극복하는 데 도움이되었습니다.
이것은 .net mvc4에서 문제로 남아 있습니다. jQuery 유효성 검사 플러그인의 명확한 설명서에도 불구하고 속성을 사용하지 않는 경우에도 EditorFor DateTime여전히 data-val-date속성이 생성 됩니다 !!! 마이크로 소프트가이 문제를 해결하고 data-val-date다시는 들리지 않기를 바랍니다!
그 동안 modernizr를 통해 제안 된 라이브러리를 사용할 수 있습니다.
yepnope({
test: isNaN(Date.parse("23/2/2012")),
nope: 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js',
complete: function () {
$.validator.methods.date = $.validator.methods.dateITA
}
});
또는 yepnope / modernizr을 사용하지 않고 dateITA 메서드의 UTC 구성 요소를 제거하려는 경우 (이 라이브러리를 사용하여 현지 시간을 입력하는 경우 날짜가 항상 해당 월의 1 일 또는 마지막 날에 유효하지는 않습니다. 그리니치 노선-예 : UTC +0) :
(function ($) {
var invokeTestDate = function () {
return $.validator.methods.date.call({
optional: function () {
return false;
}, (new Date(2012,8,23)).toLocaleDateString(), null);
};
if (invokeTestDate()) {
return;
}
// http://docs.jquery.com/Plugins/Validation/Methods/date
$.validator.methods.date = function (value, element) {
//ES - Chrome does not use the locale when new Date objects instantiated:
//return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
var d = new Date();
return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
}
})(jQuery);
우리는 프로젝트 작업을 위해 다음을 사용합니다.
if ($.validator) {
$.validator.addMethod("date",
function (value, element, params) {
if (this.optional(element)) {
return true;
}
var ok = true;
try {
$.datepicker.parseDate("dd/mm/yy", value);
}
catch (err) {
ok = false;
}
return ok;
});
}
이 오류의 가장 간단한 수정은 유효성 검사 파일을 호출 한 후 다음 코드 스 니펫입니다.
jQuery.validator.methods["date"] = function (value, element){
var shortDateFormat = "dd/mm/yy";
var res = true;
try {
$.datepicker.parseDate(shortDateFormat, value);
} catch (error) {
res = false;
}
return res;
}
2016 년에 발견 된 버전에서도 Firefox가 아닌 Chrome에서 위의 코드 없이도 여전히이 문제가 발생합니다.
작동하는 데 추가 라이브러리 나 플러그인이 필요하지 않으므로 이것이 제가 선호하는 솔루션입니다.
여기 에서 문제를 검색하는 동안이 코드 스 니펫을 찾았 습니다.
이 코드가 도움이 되길 바랍니다.
$.validator.addMethod(
"date",
function(value, element) {
var check = false;
var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
var reBR = /^\d{4}\-\d{1,2}\-\d{1,2}$/;
if( re.test(value)){
var adata = value.split('/');
var gg = parseInt(adata[0],10);
var mm = parseInt(adata[1],10);
var aaaa = parseInt(adata[2],10);
var xdata = new Date(aaaa,mm-1,gg);
if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
check = true;
else
check = false;
} else if( reBR.test(value)){
var adata = value.split('-');
var aaaa = parseInt(adata[0],10);
var mm = parseInt(adata[1],10);
var gg = parseInt(adata[2],10);
var xdata = new Date(aaaa,mm-1,gg);
if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
check = true;
else
check = false;
} else
check = false;
console.log(check);
return this.optional(element) || check;
},
"Por favor insira uma data válida"
);
validate에서 정의한 dateRule 메서드를 변경해야합니다 (예를 들어 정규식은 단순한 것입니다).
$.validator.addMethod(
"dateRule",
function(value, element) {
return value.match(/^\d\d?\/\d\d?\/\d\d$/);
},
"Please enter a date in the format dd/mm/yy"
);
원하는대로 정규식을 전환 할 수 있습니다. M / D / YY 또는 M / D / YYYY 또는 MM / DD / YYYY 또는 MM / DD / YY를 지원하는 여기 에서 날짜에 대한 정규식을 얻었습니다 : 1/1/1920 ~ 12/31/2019; 2 월 29 일 및 30 일 항상 허용
^((0?[13578]|10|12)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[01]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1}))|(0?[2469]|11)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[0]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1})))$
나는 또한 어떤 문화에도 효과가있는 것처럼 보이는 해결책을 찾았습니다.
http://devdens.blogspot.com/2011/11/jquery-validation-fix-for-date-format_29.html
It requires you to modify the actual jquery.valdiation.min.js file, but so far it's working for me.
This is the only solution that worked for me: http://www.codeproject.com/Tips/579279/Fixing-jQuery-non-US-Date-Validation-for-Chrome
jQuery.extend(jQuery.validator.methods, {
date: function (value, element) {
var isChrome = window.chrome;
// make correction for chrome
if (isChrome) {
var d = new Date();
return this.optional(element) ||
!/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
}
// leave default behavior
else {
return this.optional(element) ||
!/Invalid|NaN/.test(new Date(value));
}
}
});
Or we might try to overwrite the validator instead of ignoring it.
$.validator.addMethod("date", function (value, element) {
var result = true;
try {
$.datepicker.parseDate('dd/mm/yy', value);
}
catch (err) {
result = false;
}
return result;
});
ReferenceURL : https://stackoverflow.com/questions/6906725/unobtrusive-validation-in-chrome-wont-validate-with-dd-mm-yyyy
'programing' 카테고리의 다른 글
| grep () / gsub ()를 사용하여 정확한 일치를 찾는 방법 (0) | 2021.01.18 |
|---|---|
| 사전에서 클래스 인스턴스 속성을 생성합니까? (0) | 2021.01.17 |
| Bash : 문자열을 문자 배열로 분할 (0) | 2021.01.17 |
| 공백 만 포함 된 문자열을 감지하는 방법은 무엇입니까? (0) | 2021.01.17 |
| Jquery 선택이 + 클래스 (0) | 2021.01.17 |