jQuery 양식 유효성 검사 확장 코드 (1)_jquery
- WBOY원래의
- 2016-05-16 18:18:461092검색
다시 한 번 말씀드리지만, 플러그인 문제가 많으므로 나중에 하나씩 해결하겠습니다. 나쁜 말은 하지 마세요. 좋은 제안과 말씀 많이 주시길 바랍니다.
1. 폼 검증의 기본 상황을 분석합니다
웹 개발 과정에서 다양한 검증을 접하게 됩니다. 정리하면 기본적으로는
(1) 항목이 필수인지 여부 [아주 기본입니다]
(2) 입력 매개변수에서 범위 확인
(3)입니다. ) 입력 매개변수와 다른 컨트롤의 값 비교
(4). 입력 매개변수의 정규식 확인
2. 필수 필드 확인
다음과 같은 상황이 있습니다. :
(1) 입력 상자가 포커스를 잃고
(2) 입력 상자가 포커스를 잃고 확인 오류 메시지가 나타남
(3) 입력 상자가 포커스를 잃고 확인 메시지가 올바르게 표시됨
먼저 입력 상자가 필요한지 여부를 확인한 다음 메시지의 실제 위치를 묻는 메시지가 나타납니다.
위 상황에 따라 다음 매개변수를 결정합니다.
required: 필수 항목인지 여부, true 및 false, true는 필수 항목임을 의미합니다(*)
onFocus: 포커스를 가져오기 위한 텍스트 프롬프트( 스타일을 지정하는 경우 스타일 이름 앞에 @를 추가하면 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다.
onBlur: 포커스를 잃는 텍스트 프롬프트(스타일을 지정하는 경우 스타일 이름 앞에 @를 추가하고, 따라서 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다. (검증 실패 프롬프트)
onSucces: 검증 성공을 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하면 텍스트 프롬프트의 첫 글자가 포함될 수 없습니다. have @)
tipId: 프롬프트 정보를 표시하는 데 사용되는 컨트롤 ID(*)
조합 예: {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId: "tipid"}
참고: 위에 정의된 일부 규칙은 구현되지 않을 수 있으며 이후 프로세스에서 점진적으로 개선됩니다.
코드 복사 코드는 다음과 같습니다.
/**
* 입력란 필수 여부 확인
* 입력 매개변수:
* 필수: 필수 여부, true 및 false, true는 필수를 의미함(*)
* onFocus: 포커스를 얻는 텍스트 프롬프트 (스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다.)
* onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 지정된 경우 스타일 앞에 @가 추가됩니다) 스타일 이름이므로 텍스트 프롬프트에 첫 번째 문자는 @를 가질 수 없습니다. (검증 실패 프롬프트)
* onSucces: 성공적인 검증을 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 스타일의 첫 글자가 텍스트 프롬프트에는 @를 사용할 수 없습니다.
* TipId: 프롬프트 정보 표시에 사용되는 컨트롤 ID(*)(*)
* 조합 예: {required:true,onFocus:"Required",onBlur:"@error", onSucces:"성공",tipId:"tipid"}
*/
$ .fn.extend({
checkRequired:function(inputArg){
if(inputArg.required){
if($(this).is("input") || $(this ).is ("textarea")){
//포커스 이벤트 바인딩
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefine){
$("#" inputArg.tipId).html(inputArg.onFocus);
}
})
//포커스 손실 이벤트 바인딩
$(this).bind( "흐림",function(){
if($(this).val()!=undefine && $(this).val()!=""){
$("#" inputArg.tipId ).html(inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur)
}
}
}
}
})
사용 효과 및 테스트 코드:
초점이 맞춰지면 다음과 같은 프롬프트 효과
포커스를 잃었을 때 입력 프롬프트 효과가 없습니다
문자를 입력하면 성공효과가 뜹니다
코드 복사 코드는 다음과 같습니다.
3. 입력 매개변수의 범위 확인
위의 확인에 비해 입력값의 범위가 있기 때문에 조금 더 복잡합니다. 검증은 다음과 같이 구분합니다. 입력 데이터 유형은 문자열, 숫자, 시간
문자열인 경우 문자열의 길이를 비교하고 숫자와 시간을 비교합니다. (아직 시간이 완벽하지 않음)
비교 범위로 인해 간격 범위가 정의되므로 여기에 하한 값과 상한 값이라는 두 가지 속성이 더 추가됩니다.
입력 매개변수 목록:
onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자에 @를 사용할 수 없음)
onEmpty : 입력 항목이 빈 텍스트 프롬프트입니다(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하므로 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다)
onSucces: Text 성공적인 확인을 위한 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하십시오. 따라서 텍스트 프롬프트의 첫 글자는 @를 가질 수 없습니다.)
onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 다음과 같은 경우) 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자에 @를 사용할 수 없음)(유효성 검사 실패 프롬프트)
dataType: 데이터 유형 매개변수(텍스트, 숫자, 날짜)
min: 입력된 최소값
max: 입력된 최대값
tipId: 표시에 사용 프롬프트 정보의 제어 ID(*)
/**
* 입력 항목의 범위를 확인하세요
* 입력 매개변수:
* onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 의 첫 글자가 텍스트 프롬프트에는 @를 사용할 수 없습니다.
* onEmpty: 입력 항목이 비어 있는 경우의 텍스트 프롬프트(스타일을 지정한 경우 스타일 이름 앞에 @를 추가하므로 텍스트 프롬프트의 첫 글자에는 @를 사용할 수 없습니다.)
* onSucces: 검증 성공 시 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없음)
* onBlur: 포커스를 잃은 텍스트 프롬프트 (스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자에 @를 사용할 수 없음) (검증 실패 프롬프트)
* dataType : 데이터 유형 매개변수(텍스트, 숫자, 날짜)
* min : 입력된 최소값
* max : 입력된 최대값
* TipId : 프롬프트 정보 표시에 사용되는 컨트롤 ID (*)
*
*/
$.fn.extend({
checkRange :function(inputArg){
if ($(this).is("input") || $(this).is(" textarea")) {
//포커스 바인딩 가져오기
$( this).bind("focus",function(){
if(inputArg.onFocus!=undefine){
$( "#" inputArg.tipId).html(inputArg.onFocus);
}
});
//포커스 바인딩 상실
$(this).bind("blur",function( ){
if($(this).val()==undefine || $(this).val()==""){
$("#" inputArg.tipId).html(inputArg .onEmpty)
}else{
switch(inputArg.dataType);
대소문자 "텍스트":
if($(this).val().length>=parseInt(inputArg.min ) && $(this).val().length
}else{
$("#" inputArg.tipId).html(inputArg.onBlur); }
break;
case "번호":
if(!isNaN($(this).val() )){
if(parseInt($(this).val())> ;parseInt(inputArg.min) && parseInt($(this).val())
$("#" inputArg.tipId).html(inputArg.onBlur)
}
}
break;
case "date":
break ;
}
}
})
}
}
})
입력 범위 효과
나이를 숫자로 합의한 경우 
입력이 합의된 범위를 벗어났습니다
인증 성공 
코드 복사 코드는 다음과 같습니다
$("#txtAge").checkRange({ onFocus: "나이는 숫자입니다",
onEmpty: "비워둘 수 없습니다",
onSucces: "확인 성공",
onBlur:"확인 실패, 주의해서 입력하세요.",
dataType: "number",
min: "10",
max: "100",
tipId: "txtAgeTip"
})
4. 입력 매개변수와 다른 컨트롤의 값 비교
위 검증 비교와의 차이점은 비교 컨트롤의 id를 지정해야 한다는 점입니다
입력 매개변수는 다음과 같습니다.
onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가해야 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다.)
onEmpty: 빈 입력 항목에 대한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다.)
onSucces: 텍스트 프롬프트 성공적인 확인을 위해 (스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자는 @가 될 수 없습니다.)
onBlur: 포커스를 잃는 텍스트 프롬프트(스타일이 지정된 경우, 스타일 이름 앞에 @를 추가하면 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다(검증 실패 프롬프트)
dataType: 데이터 유형 매개변수(텍스트, 숫자, 날짜)
comType: 비교 유형(=,>,>=,<,<=,!=)
tipId: 표시에 사용되는 프롬프트 정보 제어 ID(*)
targetId: 비교 대상 컨트롤 ID
/**
* 컨트롤 값 비교
* 입력 매개변수:
* onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자가 @를 가질 수 없음)
* onEmpty: 입력 항목이 비어 있을 때의 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에 @를 가질 수 없음)
* onSucces : 검증 성공 시 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가됨) 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다.
* onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 지정된 경우 스타일이 지정되면 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자에 @를 사용할 수 없습니다. (유효성 검사 실패 프롬프트)
* dataType: 데이터 유형 매개변수(텍스트, 숫자, 날짜)
* comType: 비교 유형 (=,>,>=,<,<=,!=)
* TipId: 프롬프트 정보 표시에 사용되는 컨트롤 ID (*)
* targetId: 비교 대상 컨트롤 ID
*/
$.fn.extend({
checkCompare:function(inputArg){
if($(this).is("input") || $(this).is(" textarea")){
//포커스 바인딩 가져오기
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefine){
$(" #" inputArg.tipId).html(inputArg.onFocus);
}
});
//포커스 바인딩 손실
$(this).bind("blur",function(){
var targetValue=$("#" inputArg.targetId).val();
if(targetValue!=undefine && targetValue! =null){
if($(this).val()! =정의되지 않음 && $(this).val()!=""){
if(inputArg.dataType=="text"){
switch(inputArg.comType){
case "=":
if(targetValue==$(this).val()){
$("#" inputArg.tipId).html (inputArg.onSucces)
}else{
$(" #" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "!=":
if(targetValue!=$(this).val()){
$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$(" #" inputArg.tipId).html(inputArg.onBlur)
}
break;
}
}else if(inputArg.dataType=="number"){
if (isNaN (targetValue) == false && isNaN($(this).val()) == false) {
switch (inputArg.comType) {
case "=":
if (targetValue == $ (this).val()) {
$("#" inputArg .tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId) .html(inputArg.onBlur)
}
break; 🎜>case "!=":
if (targetValue != $(this).val()) {
$(" #" inputArg.tipId).html(inputArg.onSucces)
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur)
}
break
case ">":
if ($( this).val() > targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg. TipId).html(inputArg.onBlur);
}
break;
case ">=":
if ($(this).val() >= targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$( "#" inputArg.tipId).html(inputArg.onBlur); }
break;
case "<":
if ($(this).val() < targetValue) {
$("#" inputArg.tipId).html(inputArg. onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur)
break
case "<=" :
if ($(this).val() <= targetValue) {
$("#" inputArg.tipId) .html(inputArg.onSucces)
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
}
}else{
$("#" inputArg.tipId) .html(inputArg.onBlur);
}
}else if(inputArg.dataType=="date"){
}
}else{
$("#" inputArg.tipId ).html(inputArg.onEmpty);
}
}
})
}
}
$("#txtPass2").checkCompare({
onFocus: "이전 항목과 비교",
onEmpty: "입력은 비워둘 수 없습니다.",
onSucces: "확인 성공",
onBlur:"확인 실패",
dataType:"number",
comType:">=",
tipId:"txtPass2Tip",
targetId:" txtPass1"
});
5 . 입력 매개변수 정규식 검증
정규식을 사용하면 입력 상황을 직접 생각할 필요가 없기 때문에 이 검증은 비교적 간단합니다. 정규 표현식만 도입하면 됩니다.
입력 매개변수는 다음과 같습니다.
onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일을 지정하는 경우 스타일 이름 앞에 @를 추가하면 텍스트 프롬프트의 첫 글자 @가 있을 수 없습니다.
onEmpty: 입력 항목이 빈 텍스트 프롬프트입니다(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하므로 텍스트 프롬프트의 첫 글자는 사용할 수 없습니다). @ 있음)
onSucces: 성공적인 확인을 위한 텍스트 프롬프트(스타일을 지정하는 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자가 @가 될 수 없음)
onBlur: 포커스를 잃는 텍스트 프롬프트(스타일을 지정하는 경우 스타일 이름 앞에 @를 추가해야 텍스트 프롬프트의 첫 글자가 될 수 없음 @가 있음)(검증 실패 프롬프트)
regExp: 정규식
tipId: 프롬프트 정보를 표시하는 데 사용되는 컨트롤 ID(*)
jQuery 정규식 확인
onEmpty: "비워둘 수 없습니다",
onSucces: "확인 성공",
onBlur:"확인 실패, 주의해서 입력하세요.",
dataType: "number",
min: "10",
max: "100",
tipId: "txtAgeTip"
})
<라벨>나이:
4. 입력 매개변수와 다른 컨트롤의 값 비교
위 검증 비교와의 차이점은 비교 컨트롤의 id를 지정해야 한다는 점입니다
입력 매개변수는 다음과 같습니다.
onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가해야 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다.)
onEmpty: 빈 입력 항목에 대한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다.)
onSucces: 텍스트 프롬프트 성공적인 확인을 위해 (스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자는 @가 될 수 없습니다.)
onBlur: 포커스를 잃는 텍스트 프롬프트(스타일이 지정된 경우, 스타일 이름 앞에 @를 추가하면 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다(검증 실패 프롬프트)
dataType: 데이터 유형 매개변수(텍스트, 숫자, 날짜)
comType: 비교 유형(=,>,>=,<,<=,!=)
tipId: 표시에 사용되는 프롬프트 정보 제어 ID(*)
targetId: 비교 대상 컨트롤 ID
코드 복사 코드는 다음과 같습니다.
/**
* 컨트롤 값 비교
* 입력 매개변수:
* onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자가 @를 가질 수 없음)
* onEmpty: 입력 항목이 비어 있을 때의 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에 @를 가질 수 없음)
* onSucces : 검증 성공 시 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가됨) 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다.
* onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 지정된 경우 스타일이 지정되면 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자에 @를 사용할 수 없습니다. (유효성 검사 실패 프롬프트)
* dataType: 데이터 유형 매개변수(텍스트, 숫자, 날짜)
* comType: 비교 유형 (=,>,>=,<,<=,!=)
* TipId: 프롬프트 정보 표시에 사용되는 컨트롤 ID (*)
* targetId: 비교 대상 컨트롤 ID
*/
$.fn.extend({
checkCompare:function(inputArg){
if($(this).is("input") || $(this).is(" textarea")){
//포커스 바인딩 가져오기
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefine){
$(" #" inputArg.tipId).html(inputArg.onFocus);
}
});
//포커스 바인딩 손실
$(this).bind("blur",function(){
var targetValue=$("#" inputArg.targetId).val();
if(targetValue!=undefine && targetValue! =null){
if($(this).val()! =정의되지 않음 && $(this).val()!=""){
if(inputArg.dataType=="text"){
switch(inputArg.comType){
case "=":
if(targetValue==$(this).val()){
$("#" inputArg.tipId).html (inputArg.onSucces)
}else{
$(" #" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "!=":
if(targetValue!=$(this).val()){
$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$(" #" inputArg.tipId).html(inputArg.onBlur)
}
break;
}
}else if(inputArg.dataType=="number"){
if (isNaN (targetValue) == false && isNaN($(this).val()) == false) {
switch (inputArg.comType) {
case "=":
if (targetValue == $ (this).val()) {
$("#" inputArg .tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId) .html(inputArg.onBlur)
}
break; 🎜>case "!=":
if (targetValue != $(this).val()) {
$(" #" inputArg.tipId).html(inputArg.onSucces)
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur)
}
break
case ">":
if ($( this).val() > targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg. TipId).html(inputArg.onBlur);
}
break;
case ">=":
if ($(this).val() >= targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$( "#" inputArg.tipId).html(inputArg.onBlur); }
break;
case "<":
if ($(this).val() < targetValue) {
$("#" inputArg.tipId).html(inputArg. onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur)
break
case "<=" :
if ($(this).val() <= targetValue) {
$("#" inputArg.tipId) .html(inputArg.onSucces)
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
}
}else{
$("#" inputArg.tipId) .html(inputArg.onBlur);
}
}else if(inputArg.dataType=="date"){
}
}else{
$("#" inputArg.tipId ).html(inputArg.onEmpty);
}
}
})
}
}
컨트롤 값 간 비교 효과 및 테스트 코드
렌더링 1
렌더링 2
렌더링 3
코드 복사 코드는 다음과 같습니다.
$("#txtPass2").checkCompare({
onFocus: "이전 항목과 비교",
onEmpty: "입력은 비워둘 수 없습니다.",
onSucces: "확인 성공",
onBlur:"확인 실패",
dataType:"number",
comType:">=",
tipId:"txtPass2Tip",
targetId:" txtPass1"
});
< 스팬 id= "txtPass1Tip">
5 . 입력 매개변수 정규식 검증
정규식을 사용하면 입력 상황을 직접 생각할 필요가 없기 때문에 이 검증은 비교적 간단합니다. 정규 표현식만 도입하면 됩니다.
입력 매개변수는 다음과 같습니다.
onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일을 지정하는 경우 스타일 이름 앞에 @를 추가하면 텍스트 프롬프트의 첫 글자 @가 있을 수 없습니다.
onEmpty: 입력 항목이 빈 텍스트 프롬프트입니다(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하므로 텍스트 프롬프트의 첫 글자는 사용할 수 없습니다). @ 있음)
onSucces: 성공적인 확인을 위한 텍스트 프롬프트(스타일을 지정하는 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자가 @가 될 수 없음)
onBlur: 포커스를 잃는 텍스트 프롬프트(스타일을 지정하는 경우 스타일 이름 앞에 @를 추가해야 텍스트 프롬프트의 첫 글자가 될 수 없음 @가 있음)(검증 실패 프롬프트)
regExp: 정규식
tipId: 프롬프트 정보를 표시하는 데 사용되는 컨트롤 ID(*)
jQuery 정규식 확인
코드 복사 코드는 다음과 같습니다.
/**
* 정규 표현식 검증
* 입력 매개변수:
* onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자가 @를 가질 수 없음)
* onEmpty: 입력 항목이 비어 있을 때의 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없음)
* onSucces : 검증 성공 시 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다.)
* onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 지정된 경우 스타일이 지정되면 스타일 이름 앞에 @를 추가하므로 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다. (유효성 검사 실패 프롬프트)
* regExp : 정규식
*tipId : 팁 정보를 표시하는 데 사용되는 컨트롤 ID( *)
*/
$.fn.extend({
checkRegExp:function(inputArg){
if ($(this).is("input") || $(this).is("textarea")) {
//포커스 바인딩 가져오기
$(this).bind("focus" , function(){
if (inputArg.onFocus != 정의되지 않음) {
$("#" inputArg.tipId).html(inputArg.onFocus)
}
}); >
//포커스 손실 이벤트 가져오기
$(this).bind("blur",function(){
if($(this).val()!=undefine && $(this) .val()!=""){
if ($(this).val().match(inputArg.regExp ) == null) {
$("#" inputArg.tipId).html( inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur );
}
}else{
$("#" inputArg .tipId).html(inputArg.onEmpty);
}
})
}
}
});
정규식 효과 및 테스트 코드
* 정규 표현식 검증
* 입력 매개변수:
* onFocus: 포커스를 얻기 위한 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @를 추가하여 텍스트 프롬프트의 첫 글자가 @를 가질 수 없음)
* onEmpty: 입력 항목이 비어 있을 때의 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없음)
* onSucces : 검증 성공 시 텍스트 프롬프트(스타일이 지정된 경우 스타일 이름 앞에 @가 추가되므로 텍스트 프롬프트의 첫 글자에는 @가 포함될 수 없습니다.)
* onBlur: 포커스를 잃은 텍스트 프롬프트(스타일이 지정된 경우 스타일이 지정되면 스타일 이름 앞에 @를 추가하므로 텍스트 프롬프트의 첫 글자에 @가 포함될 수 없습니다. (유효성 검사 실패 프롬프트)
* regExp : 정규식
*tipId : 팁 정보를 표시하는 데 사용되는 컨트롤 ID( *)
*/
$.fn.extend({
checkRegExp:function(inputArg){
if ($(this).is("input") || $(this).is("textarea")) {
//포커스 바인딩 가져오기
$(this).bind("focus" , function(){
if (inputArg.onFocus != 정의되지 않음) {
$("#" inputArg.tipId).html(inputArg.onFocus)
}
}); >
//포커스 손실 이벤트 가져오기
$(this).bind("blur",function(){
if($(this).val()!=undefine && $(this) .val()!=""){
if ($(this).val().match(inputArg.regExp ) == null) {
$("#" inputArg.tipId).html( inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur );
}
}else{
$("#" inputArg .tipId).html(inputArg.onEmpty);
}
})
}
}
});
정규식 효과 및 테스트 코드
숫자가 아닌 숫자를 입력하세요
번호 입력
코드 복사
코드는 다음과 같습니다 :
$("#txtAge").checkRegExp({
onFocus: "나이는 숫자여야 합니다.",
onEmpty: "입력은 비워둘 수 없습니다.",
onSucces: "확인 성공적인 ",
onBlur:"확인 실패",
regExp:/D/,
tipId:"txtAgeTip"
});
< ;input type="text" id="txtAge" value=""/>
기본 확인 플러그입니다. - 프로토타입에서는 차후 단계에서 계속 업데이트를 하도록 하겠습니다...
$("#txtAge").checkRegExp({
onFocus: "나이는 숫자여야 합니다.",
onEmpty: "입력은 비워둘 수 없습니다.",
onSucces: "확인 성공적인 ",
onBlur:"확인 실패",
regExp:/D/,
tipId:"txtAgeTip"
});
< ;input type="text" id="txtAge" value=""/>
기본 확인 플러그입니다. - 프로토타입에서는 차후 단계에서 계속 업데이트를 하도록 하겠습니다...
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.