jquery 양식 확인이 클래스 확인 양식을 통과했습니다. 비어 있지 않습니다.

시스템을 개발하다 보면 특정 폼 데이터가 꼭 필요한 경우가 있는데, jQuery를 이용해 ID를 통해 검증하게 되면 효율성에 영향을 줄 뿐만 아니라 누락이 발생해 추후 유지 관리가 어려워지는 경우가 많습니다.

이 장에서는 jQuery를 사용하여 양식에 대한 클래스를 구성하여 통합 검증을 수행하는 방법을 소개합니다. (ID는 한 페이지에서 한 번만 사용할 수 있으며 클래스는 여러 번 참조할 수 있습니다)

1: 입력에 클래스를 추가합니다. 이름은 마음대로 설정할 수 있지만 각 입력은 일관성이 있어야 합니다. 이 장에서는 calss를 noNull로 설정합니다. (입력에 이미 클래스 속성이 있는 경우 바로 뒤에 추가할 수 있습니다.)

2: 나중에 jquery를 통해 필드를 가져오고 프롬프트로 사용하려면 입력에 속성을 추가하세요. 이 장의 케이스 프롬프트 속성은 notNull입니다.

3: jQuery를 사용하여 페이지에서 noNull 호출이 포함된 모든 양식을 탐색하고 비어 있는지 확인합니다. 비어 있으면 notNull 필드를 가져와서 빈 프롬프트를 제공합니다.

자세한 설정 방법은 아래 사례를 참고해주세요. 이 장에서는 입력, 라디오, 선택, 체크박스 및 기타 유형에 대해 설명합니다.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <form>
      <!-- input -->
      <div>
        姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull"> 
      </div>
      <br>
      <!-- radio -->
      <div>
       性别:
       男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
       女<input type="radio" name="sex" value="1" >
      </div>
      <br>
      <!-- select -->
      <div>
        年龄：
        <select name="age" class="noNull" notNull="年龄">
          <option value ="">请选择</option>
          <option value ="1">1</option>
          <option value ="2">2</option>
        </select>
      </div>
      <br>
      <!-- checkbox -->
      <div>
        兴趣：
        打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
        唱歌<input type="checkbox" name="hobby" value="2">
        跳舞<input type="checkbox" name="hobby" value="3">
      </div>
      <br>
     <button type="button" class="btn-c" onclick="bubmi()">保存</button>
  </form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
  $(".noNull").each(function(){
    var name = $(this).attr("name");
    if($(this).val()==""){
    alert($(this).attr('notNull')+"不能为空");return false;
    }
    if($(this).attr("type")=="radio"){ 
      if ($("input[name='"+name+"']:checked").size() < 1){ 
        alert($(this).attr('notNull')+"不能为空!"); 
        return false; 
      } 
    }
    if($(this).attr("type")=="checkbox"){ 
      if ($('input[name="'+name+'"]:checked').size() < 1){ 
        alert($(this).attr('notNull')+"不能为空!"); 
        return false; 
      } 
    }    
  })  
}
</script>
</body>
</html>

로그인 후 복사

다음은 jquery.validate.js 확인 플러그인을 소개합니다

jquery.validate.js는 jquery의 검증 플러그인으로, 일부 공통 입력을 빠르게 검증하고 자체 검증 방법을 확장할 수 있습니다.

예를 들어 다음과 같은 형식이 있습니다.

<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

로그인 후 복사

이 양식에는 이름, 성, 사용자 이름, 비밀번호, 비밀번호 확인 및 이메일이 있습니다. 모두 비어 있지 않아야 하며, 이메일 주소는 올바른 형식이어야 하며, 비밀번호 확인 및 비밀번호가 일관되어야 합니다. jQuery 유효성 검사를 사용하는 가장 간단한 방법은 jquery.js와 jquery 유효성 검사.js라는 두 개의 js 파일을 도입하는 것입니다. 그런 다음 각각 입력에 클래스를 추가합니다.

<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>

로그인 후 복사

다음은 유효성 검사와 함께 제공되는 기본 확인 목록입니다

필수: "필수 필드",
원격: "이 필드를 수정해 주세요.",
email: "올바른 이메일 형식을 입력하세요",
url: "법적 URL을 입력하세요",
날짜: "법적 날짜를 입력하세요",
dateISO: "유효한 날짜(ISO)를 입력하세요.",
number: "법적 번호를 입력하세요",
digits: "정수만 입력할 수 있습니다",
Creditcard: "유효한 신용카드 번호를 입력하세요",
equalTo: "같은 값을 다시 입력해주세요",
accept: "합법적인 접미사가 포함된 문자열을 입력하세요.",
maxlength: jQuery.format("길이가 최대 {0}인 문자열을 입력하세요."),
minlength: jQuery.format("길이가 {0} 이상인 문자열을 입력하세요."),
rangelength: jQuery.format("길이가 {0}에서 {1} 사이인 문자열을 입력하세요."),
범위: jQuery.format("{0}에서 {1} 사이의 값을 입력하세요."),
max: jQuery.format("최대 {0}개의 값을 입력하세요."),
min: jQuery.format("최소값 {0}을(를) 입력하세요")

그런 다음 문서의 읽기 이벤트에 다음 메서드를 추가합니다.

   <script>
    $(document).ready(function(){
        $("#signupForm").validate();
    }
   </script>

로그인 후 복사

이렇게 양식을 제출하면 입력된 클래스를 기준으로 검증됩니다. 실패하면 양식 제출이 차단됩니다. 그리고 입력 뒤에 프롬프트 정보가 표시됩니다.

그러나 유효성 검사 규칙이 HTML 코드를 침범하기 때문에 기분이 좋지 않습니다. 또 다른 방법은 "규칙"을 사용하는 것입니다. 입력에 대한 검증 클래스를 삭제합니다. 그런 다음 문서의 준비 이벤트 응답 코드를 수정합니다.

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})

로그인 후 복사

이런 식으로 동일한 효과를 얻을 수 있습니다.

그러면 다음 질문은 표시되는 오류 메시지가 기본값이라는 것입니다. 맞춤 프롬프트를 사용해야 합니다.

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

로그인 후 복사

오류 메시지에 특별한 스타일을 표시하려는 경우(예: 글꼴이 빨간색임) 다음을 추가할 수 있습니다.

<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>

로그인 후 복사

입력 비밀번호 길이에 대한 유효성 검사 규칙을 계속 추가하세요.

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

로그인 후 복사

리모컨 사용

이벤트를 통해 트리거 효과 방법을 지정할 수 있습니다(선택 값에는 keyup(키를 누를 때마다), 흐림(컨트롤이 포커스를 잃을 때)이 포함되며, 지정하지 않으면 제출 버튼을 눌렀을 때만 트리거됩니다. 누름)

$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})

로그인 후 복사

디버그를 true로 지정하면 양식이 제출되지 않고 확인용으로만 사용할 수 있으며(기본값은 제출) 디버깅에만 사용할 수 있습니다

$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})

로그인 후 복사

제출하기 전에 일부 맞춤 처리를 수행해야 하는 경우 submitHandler 매개변수를 사용하세요

$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})

로그인 후 복사

jquery 양식 확인이 클래스 확인 양식을 통과했습니다. 비어 있지 않습니다._jquery