jquery.validate 플러그인-양식 유효성 검사 전에 값을 자르는 방법
Jörn Zaefferer 의 우수한 jquery.validation 플러그인 을 사용하고 있으며 유효성을 검사하기 전에 양식 요소를 자동으로 트림하는 쉬운 방법이 있는지 궁금합니다.
다음은 이메일 주소의 유효성을 검사하는 양식의 작지만 작동하는 예제입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js"
type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("#commentForm").validate({
rules: {
email: {
required: true,
email: true
}
}
});
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<label for="cemail">E-Mail:</label><input id="cemail" name="email"
class="required email" />
<input class="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
문제는 일부 사용자가 실수로 "test@test.com"과 같이 이메일 주소에 공백을 입력했기 때문에 혼란스러워한다는 것입니다. 그리고 양식이 제출되지 않고 "유효한 이메일 주소를 입력하십시오."라는 오류 메시지가 표시됩니다. 비전문 사용자는 공백을 발견하는 방법을 모르고 자신이 잘못한 일을 해결하려고하기보다는 사이트를 종료 할 수 있습니다.
어쨌든, jQuery.trim(value)유효성 검사 전에 " "를 연결 하여 공백이 제거되고 유효성 검사 오류가 발생하지 않기를 바랐 습니까?
addMethod 를 사용 하여 이메일 유효성 검사 기능을 구축 할 수 있습니다 . 하지만 더 우아한 솔루션이 있다고 확신합니까?
나는 이것을 성공적으로했다.
대신에:
Email: { required: true, email: true }
저는 이것을 했어요:
Email: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
email: true
}
이 코드는 저에게 효과적입니다. 많이 사용하지 않아 버그가있을 수 있습니다.
각 메서드를 래핑하고 값인 첫 번째 요소를 잘라냅니다.
(function ($) {
$.each($.validator.methods, function (key, value) {
$.validator.methods[key] = function () {
if(arguments.length > 0) {
arguments[0] = $.trim(arguments[0]);
}
return value.apply(this, arguments);
};
});
} (jQuery));
select2와 유효성 검사를 동시에 사용하는 경우 다음 el.val($.trim(el.val()));과 같이 IF 안에 넣는 것이 좋습니다 if(el.prop('type') != 'select-multiple'){el.val($.trim(el.val()));}.. 이렇게하면 jquery 유효성 검사가 예상대로 작동하고 여러 항목을 선택할 수 있습니다.
기본적으로 모든 양식에서이 동작을 원하기 때문에 jquery.validate.js 파일을 수정하기로 결정했습니다. onfocusout 메서드에 다음 변경 사항을 적용했습니다.
실물:
onfocusout: function (element, event) {
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
}
에:
onfocusout: function (element, event) {
if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT" && element.type !== "password")) {
element.value = $.trim(element.value);
}
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
}
구걸과 암호 끝에 공백을 허용하고 싶습니다.
autoTrim은 옵션에 속성으로 추가 될 수 있습니다.
나는 xuser ( https://stackoverflow.com/a/10406573/80002 ) 의 접근 방식을 좋아 하지만 플러그인 소스 코드를 엉망으로 만드는 것을 좋아하지 않습니다.
따라서 대신 이렇게하는 것이 좋습니다.
function injectTrim(handler) {
return function (element, event) {
if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT"
&& element.type !== "password")) {
element.value = $.trim(element.value);
}
return handler.call(this, element, event);
};
}
$("form").validate({
onfocusout: injectTrim($.validator.defaults.onfocusout)
});
validator.js를 다운로드 할 때 필드의 공백을 제거하는 "nowhitespace"및 "lettersonly"메소드를 포함하는 additional-methods.js라는 파일이 있습니다.
rules: {
user_name: {
required: true,
minlength: 3,
nowhitespace: true
}
}
참고로 더 우아한 솔루션을 찾을 때까지 다음과 같이 addMethod 를 사용 하고 있습니다.
// Extend email validation method so that it ignores whitespace
jQuery.validator.addMethod("emailButAllowTrailingWhitespace", function(value, element) {
return (this.optional(element) || jQuery.validator.methods.email.call(this, jQuery.trim(value), element));
}, "Please enter a valid email");
$().ready(function() {
$("#commentForm").validate({
rules: {
cemail: {
required: true,
emailButAllowTrailingWhitespace: true
}
}
});
});
참고 : 이것은 실제로 필드에서 공백을 제거하지 않고 무시할뿐입니다. 따라서 trimDB에 삽입하기 전에 서버 측에서 수행하는지 확인해야합니다 .
새 jQuery 유효성 검사기 메서드를 추가합니다 requiredNotBlank. 그런 다음 기본 required함수가 아닌 요소에 해당 함수를 적용하십시오 . 이 솔루션은 원래 유효성 검사기 소스 코드를 변경하지 않으며 기본 required함수를 수정하지도 않으며 요소의 값을 직접 수정하지도 않습니다.
// jQuery Validator method for required not blank.
$.validator.addMethod('requiredNotBlank', function(value, element) {
return $.validator.methods.required.call(this, $.trim(value), element);
}, $.validator.messages.required);
// ...
$('#requiredNotBlankField').rules('add', 'requiredNotBlank');
jquery 유효성 검사기에서 정규식을 가져 왔습니다. 이메일 확인을 무시하십시오.
$.validator.addMethod("email", function(value, element) {
value = value.trim();
return this.optional(element) || /^((([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.test(value);
}, "Please enter a valid email.");
트림을 흐림 이벤트에 바인딩 할 수 없습니까? 뭔가 ...
$ ( "# cemail"). blur (function () {
$ (this) .val (jQuery.trim ($ (this) .val ());
});
이것이 나를 위해 작동하는 것입니다.
$(':input').change(function() {
$(this).val($(this).val().trim());
});
Starting from jQuery Validation plugin version 1.15 a normalizer function is supported. The normalizer can transform the value of an element before validation.
Note that the result of the normalizer is only used for validation. If you would like to update the value of the element you must do so explicitly.
$("#form").validate({
rules: {
email: {
required: true,
email: true,
// Optionally disable validation on every key press
onkeyup: false,
normalizer: function(value) {
// Update the value of the element
this.value = $.trim(value);
// Use the trimmed value for validation
return this.value;
}
}
}
});
I've found that the majority of these are not quite what is needed.
Using the following only fires on form change rather than on key down allowing you to still check on key stroke for the rest of the validation.
It's not as tidy as including it within the plugin, but it's an acceptable compromise.
$('body').on 'change', 'form input[type=text], form input[type=email]', ->
$(@).val $.trim($(@).val())
In jquery validation you will find the below code:
required: function( value, element, param ) {
// Check if dependency is met
if ( !this.depend( param, element ) ) {
return "dependency-mismatch";
}
if ( element.nodeName.toLowerCase() === "select" ) {
// Could be an array for select-multiple or a string, both are fine this way
var val = $( element ).val();
return val && val.length > 0;
}
if ( this.checkable( element ) ) {
return this.getLength( value, element ) > 0;
}
return value.length > 0;
}
Change the value.length to $.trim(value).length
You can run code before the form is checked like this:
var origCheckForm = $.validator.prototype.checkForm;
$.validator.prototype.checkForm = function() {
$(this.currentForm).find('.CodeMirror').each(function() {
if(this.CodeMirror && this.CodeMirror.save) {
this.CodeMirror.save();
}
});
return origCheckForm.apply(this, arguments);
};
I've used it to save all my CodeMirror instances back to their corresponding texareas. You could use it to trim values instead if you want.
Use normalizer, Please check below example
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
$("#myform").validate({
rules: {
field: {
required: true,
normalizer: function(value) {
// Trim the value of the `field` element before
// validating. this trims only the value passed
// to the attached validators, not the value of
// the element itself.
return $.trim(value);
}
}
}
});
</script>
Why not do this?
Validation is occurring after the keyup event. On keyup replace textbox value with its trimmed value (or use a regex to remove any space):
$("#user_name").on("keyup", function(){
$("#user_name").val($.trim($("#user_name").val()));
});
ReferenceURL : https://stackoverflow.com/questions/1827483/jquery-validate-plugin-how-to-trim-values-before-form-validation
'program tip' 카테고리의 다른 글
| div에서 첫 번째 클래스 찾기 (0) | 2020.12.28 |
|---|---|
| 텍스트의 URL을 HTML 링크로 교체 (0) | 2020.12.27 |
| 자바에서 문자 자르기 (0) | 2020.12.27 |
| 브라우저에 PHP 오류가 표시되지 않음 [Ubuntu 10.10] (0) | 2020.12.27 |
| PHP에서 객체 배열을 복제하는 방법은 무엇입니까? (0) | 2020.12.27 |