집 > 기사 > 웹 프론트엔드 > jQuery Validate의 초기 경험(1)_jquery

jQuery Validate의 초기 경험(1)_jquery

WBOY원래의: 2016-05-16 15:26:081306검색

jQuery는 HTML 파일 탐색, 이벤트 처리, 애니메이션 및 Ajax 상호 작용을 단순화하여 웹 페이지 제작의 신속한 개발을 촉진하는 빠르고 간단한 JavaScript 라이브러리입니다. jQuery는 JavaScript 작성 방식을 변경하도록 설계되었습니다.

jQuery Validate 플러그인은 양식에 대한 강력한 유효성 검사 기능을 제공하여 클라이언트 측 양식 유효성 검사를 더 쉽게 만듭니다.

하지만 배우는 과정에서 의문점도 발견했습니다. 인터넷에 있는 많은 예제는 jquery.metadata.js 라이브러리에 의존하는 것 같은데, 클래스 자체가 The입니다. 프리젠테이션 스타일에는 다양한 검증 규칙이 첨부되어 있어 다소 지저분해 보입니다. 그렇다면 jquery.metadata.js에 의존하지 않는 경우 어떻게 작성해야 할까요?

1. jquery.js(특정 버전은 직접 선택)와 jquery.validate.js만 소개하세요

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密码</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">邮箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

위 JS 파일 2개만 도입하면 간단한 폼 검증이 완료될 수 있음이 밝혀졌습니다.

2. 다만, 기본 프롬프트 정보가 영어로 되어 있기 때문에, 친근한 프롬프트를 위해서는 다음으로 프롬프트 정보를 중국어로 표시해 주어야 합니다.

방법 1. 자바스크립트를 통해 프롬프트 정보를 맞춤화합니다.

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate({
  rules : {
  username : {
   required : true,
   rangelength:[2,10]
  },
  password : {
   required : true,
   minlength:6
  },
  confirmpassword : {
   required : true,
   equalTo:"#cpassword"
  },
  email : {
   required : true,
   email : true
  }
  },
  messages : {
  username : {
   required : '请输入姓名',
   rangelength:'长度在 {0} 到 {1} 之间'
  },
  password : {
   required : '请输入密码',
   minlength:'密码不能少于 {0}位'
  },
  confirmpassword : {
   required : '请再次输入密码',
   equalTo:'两次输入的密码不一致'
  },
  email : {
   required :'请输入邮箱',
   email : '请输入有效的电子邮件地址'
  }
  }
 });
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text"/>
  </p>
  <p>
  <label for="cpassword">密码</label> 
  <input id="cpassword" name="password" type="password"/>
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password"/>
  </p>
  <p>
  <label for="cemail">邮箱</label>
  <input id="cemail" name="email" type="email"/>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

먼저 메소드 호출이 있습니다: $("#registerForm").validate([options]) 이는 선택을 확인하는 데 사용되는 양식입니다. 메소드의 매개변수는 선택사항이며 0개 이상의 키 값을 입력할 수 있습니다. (키/값)의 경우 이 메소드는 제출, 포커스, 키업, 흐림, 유효성 검사를 트리거하는 클릭 등을 처리하는 것입니다. 유효성 검사를 위한 요소를 정의하고 errorClass , errorElement, Wrapper, errorLabelContainer, errorContainer, showErrors, Success, errorPlacement,highlight, unhighlight,ignoreTitle을 사용하여 잘못된 요소에 대한 오류 메시지 표시를 제어합니다. 그 중 규칙에 0개 이상의 키-값 쌍을 입력할 수도 있으며, 해당 키는 사용자 이름, 비밀번호 확인 등과 같은 요소의 이름 속성 값에 해당합니다. 그리고 그 값에는 몇 가지 검증 규칙이 포함되어 있습니다. 규칙과 마찬가지로 메시지도 0개 이상의 키-값 쌍을 입력할 수 있습니다. 해당 키는 해당 요소의 이름 속성 값이기도 하며, 해당 값은 확인 오류 메시지입니다. 즉, 규칙의 메서드는{} 유효성 검사 규칙을 정의합니다. 오류 출력은 메시지에 정의됩니다{}.

위에서 주목해야 할 점은 equalTo: "#cpassword"입니다. 이 키-값 쌍의 값은 요소의 ID 값입니다(# 기호를 보면 이를 감지할 수 있어야 합니다).

위 작성 방법을 사용하면 프롬프트 정보를 맞춤 설정할 수 있습니다. 질문이 있으신가요? 양식을 확인할 때마다 프롬프트 정보를 다시 맞춤설정해야 하나요? 물론 아닙니다. Ctrl C Ctrl V도 가능합니다. 물론 이것은 농담입니다. . . 그러나 다음 방법 2는 귀하의 의심을 해결해 줄 것입니다.

방법 2: 프롬프트 메시지를 사용자 정의하고 JS 파일로 저장합니다. 템플릿으로 사용하고 필요한 페이지에서 직접 가져오세요. 인터넷에서 사본을 다운로드했습니다.

(function( factory ) {
 if ( typeof define === "function" && define.amd ) {
 define( ["jquery", "../jquery.validate"], factory );
 } else {
 factory( jQuery );
 }
}(function( $ ) {
/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
 required: "这是必填字段",
 remote: "请修正此字段",
 email: "请输入有效的电子邮件地址",
 url: "请输入有效的网址",
 date: "请输入有效的日期",
 dateISO: "请输入有效的日期 (YYYY-MM-DD)",
 number: "请输入有效的数字",
 digits: "只能输入数字",
 creditcard: "请输入有效的信用卡号码",
 equalTo: "你的输入不相同",
 extension: "请输入有效的后缀",
 maxlength: $.validator.format("最多可以输入 {0} 个字符"),
 minlength: $.validator.format("最少要输入 {0} 个字符"),
 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
 range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
 max: $.validator.format("请输入不大于 {0} 的数值"),
 min: $.validator.format("请输入不小于 {0} 的数值")
});
}));

추가 JS 파일이 도입된다는 점을 제외하면 페이지의 코드는 JV1.HTML과 거의 동일합니다.

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script> 
<script>
 $().ready(function() {
 $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密码</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">邮箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

方法一和方法二並不互斥，兩種方法是可以結合使用的。你可以先用方法二儲存一份比較通用的模板，然後再用方法一去依具體情況來自訂提示。

以上就是我今天下午學習的收穫了。據說在新版本中，又有了新的寫法，既不需要依賴上面提到的jquery.metadata.js庫，也不需要通過javascript自定義提示信息，而是在標籤里以data-rule-驗證規則、data-msg-提示資訊這樣的格式來重新定義。躍躍欲試......

以下是官網提供的預設校驗規則。

(1)required:true 必輸欄位
(2)remote:"check.php" 使用ajax方法呼叫check.php驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件
(4)url:true 必須輸入正確格式的網址
(5)date:true 必須輸入正確格式的日期
(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true 必須輸入合法的數字(負數，小數)
(8)digits:true 必須輸入整數
(9)creditcard: 必須輸入合法的信用卡號
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法後綴名的字串（上傳檔案的後綴）
(12)maxlength:5 輸入長度最多是5的字串(漢字算一個字元)
(13)minlength:10 輸入長度最小是10的字串(漢字算一個字元)
(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元)
(15)range:[5,10] 輸入值必須介於 5 和 10 之間
(16)max:5 輸入值不能大於5
(17)min:10 輸入值不能小於10

好了，摸索了將近兩個小時，我的第一篇隨筆到這也算是完成了。同時希望能帶給大家靈感。

下篇文章跟大家介紹jQuery Validate初步體驗(二)，一起學習吧。

성명：

이전 기사：JavaScript 정규식_javascript 기술의 RegExp 개체에 대한 자세한 설명다음 기사：JavaScript 정규식_javascript 기술의 RegExp 개체에 대한 자세한 설명

jQuery Validate의 초기 경험(1)_jquery

관련 기사