jQuery Validate 양식 유효성 검사 플러그인에 대한 자세한 설명
- 小云云원래의
- 2018-01-10 10:12:243612검색
이 글은 주로 jQuery Validate 양식 확인 플러그인 구현 코드를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.
1 폼 검증 준비
긴 논의를 시작하기 전에 먼저 폼 검증의 효과를 보여드리겠습니다.
1. 양식 항목을 클릭하면 도움말 프롬프트가 표시됩니다. 2. 마우스가 양식 항목을 벗어나면 요소 확인이 시작됩니다. 3. 마우스가 떠난 후 올바른 메시지와 오류 메시지가 표시되고, 도움말 메시지가 나타나면 도움말 알림이 표시됩니다. 마우스 움직임
초보자를 위한 일반적으로 HTML 양식 유효성 검사는 매우 사소한 문제입니다. 양식 검증을 수행하려면 다음 기본 요소를 준비해야 합니다.
1.html 양식 구조: 검증이 필요한 양식 요소를 포함합니다.
2.js 논리 제어: 검증이 필요한 양식 요소에 이벤트 바인딩 클릭, 포커스 획득, 포커스 상실 및 기타 이벤트와 같은 확인 및 이러한 이벤트에 해당하는 실행 기능 설정
3. CSS 스타일 설정: 확인이 필요한 양식 요소에 대해 기본 이니셜을 설정해야 합니다. 스타일 및 요소 바인딩 이벤트 스타일을 트리거한 후의 변경 사항입니다.
이 세 가지 기본 요소 중에서 html 양식 구조를 만드는 것은 비교적 간단합니다. 양식 검증의 초점과 어려움은 js를 사용하여 사용자에게 양식 작업에 대한 정보를 신속하고 효과적으로 상기시키는 방법입니다. 여기서는 Baidu, 163 Mailbox, JD.com 등 유명 인터넷 회사의 등록 페이지를 참조하고 양식 확인에 필요한 주요 프롬프트 정보를 다음과 같이 요약합니다.
1. 양식 요소가 포커스된 후의 도움말 정보( 해당 클래스 이름 "플러그인의 팁")
2. 양식 요소가 검증될 때의 성공 정보(플러그인의 클래스 이름 "valid"에 해당)
3. 양식 요소가 확인되지 않습니다(플러그인의 클래스 이름 "error"에 해당).
플러그인이 없으면 다양한 스타일 간 전환을 고려하고 몇 가지 기본 유효성 검사 규칙을 작성하는 등 다양한 유형의 정보 프롬프트를 작성하는 데 많은 시간을 소비해야 합니다. “내가 더 멀리 볼 수 있는 이유는 거인의 어깨 위에 서 있기 때문이다.”라는 유명한 말이 있습니다. 기존의 성숙한 플러그인을 사용하여 양식 유효성 검사 기능을 신속하게 작성하는 데 도움을 받으면 효율성을 향상시킬 수 있을 뿐만 아니라 자체 논리에 집중할 시간을 가질 수 있습니다.
많은 양식 유효성 검사 플러그인 중에서 jQuery 유효성 검사 플러그인은 가장 오래된 jQuery 플러그인 중 하나이며 전 세계의 다양한 프로젝트에서 검증되었습니다. 기능은 다음과 같습니다:
1. 내장된 검증 규칙: 필수 필드, 숫자, 이메일, URL 및 신용 카드 번호와 같은 검증 규칙이 내장되어 있습니다.
2. 맞춤형 검증 규칙: 쉽게 사용자 정의할 수 있습니다. 검증 규칙($ .validator.addMethod(name, method, message) 구현을 통해)
3. 간단하고 강력한 검증 정보 프롬프트: 검증 정보 프롬프트가 기본값으로 설정되어 있으며 기본 정보 프롬프트를 사용자 정의하는 기능을 제공합니다( 메시지 매개변수 구현)
4. 실시간 검증: 양식을 제출할 때뿐만 아니라 키업이나 블러 이벤트를 통해서도 검증이 실행될 수 있습니다.
다음으로 간단하고 아름다운 양식 유효성 검사 예제를 구현하기 위해 이 플러그인을 선택합니다.
2 양식 유효성 검사를 구현하는 jquery 유효성 검사 플러그인의 작은 예
jquery 유효성 검사 플러그인을 소개하기 전에 해당 플러그인이 종속된 jquery.js 파일을 소개해야 합니다(예제에서 jquery 버전은 1.9입니다). 구현 과정에서 좋은 결과를 얻기 위해 jquery.validate.extend.js 파일에서 jquery 유효성 검사의 원래 기능을 확장하고 관련 기본 옵션을 수정했습니다. 따라서 3개의 파일을 도입해야 합니다. 문서 헤드:
<script src="jquery.js"></script> <script src="lib/jquery.validate.min.js"></script> <script src="lib/jquery.validate.extend.js"></script>
2.1 Form html
Form 검증의 세 가지 요소 중 먼저 html Form 구조 코드 작성을 완료해야 합니다. 양식 구조를 간단하고 명확하게 만들기 위해 양식의 각 요소를 p 구조로 래핑합니다. 레이블 태그는 요소 이름을 표시하는 데 사용되며 그 뒤에 양식 요소 자체가 표시됩니다. [참고: 1. 라벨 태그를 사용하면 마우스 사용자의 사용성이 향상되는 이점이 있습니다. 레이블 요소 내의 텍스트를 클릭하면 브라우저는 자동으로 레이블과 관련된 양식 컨트롤로 초점을 이동합니다. 2. 확인해야 하는 각 양식 요소는 플러그인을 사용할 때 확인 규칙 및 확인 정보를 요소에 바인딩하기 쉽도록 id 및 name 속성을 설정해야 합니다. 】
양식 구현 코드는 다음과 같습니다.
<form action="#" method="post" id="regForm"> <fieldset> <legend>jquery-validate表单校验验证</legend> <p class="item"> <label for="username" class="item-label">用户名:</label> <input type="text" id="username" name="username" class="item-text" placeholder="设置用户名" autocomplete="off" tip="请输入用户名"> </p> <p class="item"> <label for="password" class="item-label">密码:</label> <input type="password" id="password" name="password" class="item-text" placeholder="设置密码" tip="长度为6-16个字符"> </p> <p class="item"> <label for="password" class="item-label">确认密码:</label> <input type="password" name="repassword" class="item-text" placeholder="设置确认密码"> </p> <p class="item"> <label for="amt" class="item-label">金额:</label> <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金额" tip="交易金额必须大于0，且最多有两位小数"> </p> <p class="item"> <input type="submit" value="提交" class="item-submit"> </p> </fieldset> </form>
2.2 양식 확인 js logic
接着我们通过js来实现对表单元素的校验。在校验之前，我对jquery validate插件进行了功能扩展，对默认的选项进行了重写覆盖。jquery validate插件默认只提供了校验正确及错误时的提示，缺少我们常见的帮助信息提示。为了解决这个问题，我仔细研究了插件的源码，发现插件本身提供了onfocusin(校验元素获得焦点时调用)和onfocusout(校验元素失去焦点时调用)这两个函数。通过修改默认参数的这两个接口，可以实现党用户鼠标点击或选择元素时(即元素获得焦点)，提示帮助信息；在用户鼠标离开元素时(即元素失去焦点)，移除帮助信息。
此外，jquery validate默认提供表单元素输入时的实时校验，因为我们要求在输入时只提示用户帮助信息，故需要关闭输入的实时校验，为此我们将默认参数中的onkeyup设置为null。
具体的扩展改进代码我放到了新增js脚本jquery.validate.extend.js中，代码如下：
/*******************************插件新功能-设置插件validator的默认参数*****************************************/
$.validator.setDefaults({
/*关闭键盘输入时的实时校验*/
onkeyup: null,
/*添加校验成功后的执行函数--修改提示内容，并为正确提示信息添加新的样式(默认是valid)*/
success: function(label){
/*label的默认正确样式为valid，需要通过validClass来重置，否则这里添加的其他样式不能被清除*/
label.text('').addClass('valid');
},
/*重写校验元素获得焦点后的执行函数--增加[1.光标移入元素时的帮助提示,2.校验元素的高亮显示]两个功能点*/
onfocusin: function( element ) {
this.lastActive = element;
/*1.帮助提示功能*/
this.addWrapper(this.errorsFor(element)).hide();
var tip = $(element).attr('tip');
if(tip && $(element).parent().children(".tip").length === 0){
$(element).parent().append("<label class='tip'>" + tip + "</label>");
}
/*2.校验元素的高亮显示*/
$(element).addClass('highlight');
// Hide error label and remove error class on focus if enabled
if ( this.settings.focusCleanup ) {
if ( this.settings.unhighlight ) {
this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
}
this.hideThese( this.errorsFor( element ) );
}
},
/*重写校验元素焦点离开时的执行函数--移除[1.添加的帮助提示,2.校验元素的高亮显示]*/
onfocusout: function( element ) {
/*1.帮助提示信息移除*/
$(element).parent().children(".tip").remove();
/*2.校验元素高亮样式移除*/
$(element).removeClass('highlight');
/*3.替换下面注释的原始代码，任何时候光标离开元素都触发校验功能*/
this.element( element );
/*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
this.element( element );
}*/
}
});
完善插件的功能后，现在就是重头戏——使用插件为表单元素绑定校验规则和校验信息。jquery validate插件提供validate方法实现form表单的元素校验，该方法的参数是一个包含键值对的对象。其中最常用的键有rules(为不同元素定义校验规则)，messages(为不同元素定义错误提示信息)，success(校验正确后的字符串或者是执行函数)。常见的校验规则有：required(是否必填)，minlength(最小长度)，maxlength(最大长度)，email(email格式规则)，url(url格式规则)，date(date格式规则)，rangelength(给定长度范围规则)，equalTo(要求元素等于另一元素例如equalsTo:"#password")。下面的代码呈现了如何对表单中的用户名、密码等字段绑定校验规则：
<script>
$(document).ready(function(){
$("#regForm").validate({
rules: {
username:{
required: true,
minlength: 2
},
password:{
required: true,
minlength: 6,
maxlength: 16
},
repassword:{
required: true,
equalTo: "#password"
},
amt: {
required: true,
amtCheck: true
}
},
messages:{
username:{
required: "用户名不能为空",
minlength: "用户名的最小长度为2"
},
password:{
required: "密码不能为空",
minlength: "密码长度不能少于6个字符",
maxlength: "密码长度不能超过16个字符"
},
repassword:{
required: "确认密码不能为空",
equalTo: "确认密码和密码不一致"
},
amt: {
required: "金额不能为空"
}
}
});
});
</script>
2.3 表单验证css样式
最后还要为页面元素添加css样式。插件中有一系列默认选项：其中默认错误显示标签为label，错误样式为label.error。上面在jquery.validate.extend.js文件中，有一个success函数需要说明一下。这个函数是在校验成功的时候执行的，我们在函数中为label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示，需要对label相关样式如error,valid样式进行设计。此外我们在扩展插件功能中添加了一个class为tip的label标签，该标签仅在校验元素获得焦点时生成。为此，还需要设置label的tip样式。
完整的样式文件内容具体如下：
body{
font-family: Microsoft Yahei;
font-size: 15px;
}
fieldset{ width: 680px; }
legend{ margin-left: 8px; }
.item{
height: 56px;
line-height: 36px;
margin: 10px;
}
.item .item-label{
float: left;
width: 80px;
text-align: right;
}
.item-text{
float: left;
width: 244px;
height: 16px;
padding: 9px 25px 9px 5px;
margin-left: 10px;
border: 1px solid #ccc;
overflow: hidden;
}
.item-select{
float: left;
height: 34px;
border: 1px solid #ccc;
margin-left: 10px;
font-size: 14px;
padding: 6px 0px;
}
.item-submit{
margin-left: 88px;
}
input.error{
border: 1px solid #E6594E;
}
input.highlight{
border: 1px solid #7abd54;
}
label.error,label.tip{
float: left;
height: 32px;
line-height: 32px;
font-size: 14px;
text-align: left;
margin-left: 5px;
padding-left: 20px;
color: red;
background: url('error.png') no-repeat left center;
}
label.tip{
color: #aaa;
background: url('tip.png') no-repeat left center;
}
label.valid{
background: url('valid.png') no-repeat left center;
width: 32px;
}
3 表单验证效果演示
至此，表单校验的代码编写和插件的应用已经全部完成。在浏览器中运行代码，显示效果如下图：
基本上满足现在大多数网站表单验证的要求，如果需要增加验证规则，只需要在jquery.validate.extend.js中增加校验规则即可，例子如下：
/*******************************插件字段校验*****************************************/
$.validator.addMethod(
"amtCheck",
function(value, element){
/*var dotPos = value.indexOf('.');
return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/
return value && /^\d*\.?\d{0,2}$/.test(value);
},
"金额必须大于0且小数位数不超过2位"
);
相关推荐：
jquery.validate.js 多个相同name的处理方式详解
위 내용은 jQuery Validate 양식 유효성 검사 플러그인에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!