js 양식 유효성 검사 프레임워크를 작성하는 방법을 단계별로 가르쳐주세요. yourself_js 객체 지향

양식 프로그램에서는 양식을 확인하기 위해 페이지에 Js 코드가 많이 필요한지, 각 필드를 반드시 채워야 하는지,
는 숫자만 입력할 수 있는지, 원격 확인을 위해 ajax가 필요한지, blablabla가 필요한지 등을 확인합니다.
하나씩 작성하는 것은 매우 번거롭기 때문에 첫 번째 목표는 DSL과 유사한 것을 구축하는 것입니다.
제어문 대신 표현문을 사용하여 검증을 구현합니다.
둘째, 하나씩 작성하면 또 다른 문제가 있습니다. 모든 인증을 통과해야 제출할 수 있습니다. 하지만 개별 인증은 이 기능으로 인해 추가 제어 코드가 많이 추가됩니다
. 확인이 불완전한 경우가 많습니다. 따라서 두 번째 목표는
전체 검증 프로세스를 완전히 통합하는 것입니다.
결국 확장이 불가능한 하드코딩 구현은 불가능합니다.
먼저 필드 유효성 검사를 설명할 수 있는 클래스가 필요합니다.

코드 복사 코드는 다음과 같습니다.

function Field(params){
this.field_id=params.fid; //검증할 필드의 ID
this.validators=params.val; //검증기 개체 배열
this.on_suc=params.suc; //검증 성공 시 실행되는 이벤트
this.on_error=params.err; //검증 실패 시 실행되는 이벤트
this.checked=false; 유효성 검사 통과 여부
}

나중에 유효성 검사기 개체에 대해 설명하겠습니다. 다음으로 이 클래스를 확장하고 유효성 검사 메서드를 추가합니다.

코드 복사 코드는 다음과 같습니다:

Field.prototype.validate=function(){
//각 유효성 검사기를 통해
(이 .validators의 항목){
//검증 성공 및 검증 실패에 대한 콜백 이벤트를 검증기에 첨부합니다.
this.set_callback(this.validators[item])//Validate 메소드를 실행합니다. 규칙 준수 여부를 검증하는 검증기
if(!this.validators[item].validate(this.data())){
break; //검증기가 실패하면 중지
}
}
}


필드 값을 가져오는 다른 메서드 추가:

코드 복사 코드는 다음과 같습니다.

//필드 값을 가져오는 방법

Field.prototype.data=function(){
return document.getElementById(this.field_id).value ;
}


검증기 콜백 함수를 설정하는 set_callback 메소드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

Field.prototype.set_callback=function(val){

var self=this; //이것을 저장하려면 이름을 변경하세요. 함수를 닫으면 이 이름을 덮어씁니다
val .on_suc=function(){ //성공적인 실행을 확인하는 방법
self.checked=true; //성공적인 실행을 확인하기 위한 필드 설정
self. on_suc(val.tips); //성공적인 실행을 확인하기 위한 이벤트 실행
}
val.on_error=function(){ //확인 실패 시 실행되는 메서드
self.checked=false; 검증 실패로 설정
self.on_error(val.tips );//검증 수행에 실패한 이벤트
}
}

다음으로 살펴보겠습니다. Validator는 검증과정을 실제로 수행하는 클래스이다. 유형 A 유효성 검사기 클래스, Ajax 원격 검증은 편의를 위해 jQuery를 사용하고 다른
부분도 유용합니다.





코드 복사

코드는 다음과 같습니다.

//长道验证的验证器类
function Len_val(min_l,max_l,tip){
this.min_v=min_l;
this.max_v=max_l;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Len_val.prototype.validate=function(fd){
if(fd.lengththis.max_v){
this.on_error();
거짓을 반환합니다.
}
this.on_suc();
참을 반환합니다.
}
//正则表达式验证器
function Exp_val(expression,tip){
this.exps=expresion;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Exp_val.prototype.validate=function(fd){
if(!fd){
this.on_suc();
참을 반환합니다.
}
if(this.exps.test(fd)){
this.on_suc();
참을 반환합니다.
}else{
this.on_error();
거짓을 반환합니다.
}
}
//远程验证器
function Remote_val(url,tip){
this.p_url=url;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Remote_val.prototype.validate=function(fd){
var self=this;
$.post(this.p_url,{f:fd},
function(data){
if(data.rs){
self.on_suc();
return;
}else{
self.on_error();
}
},"json"
);
거짓을 반환합니다.
}
//자정义函数验证器
function Man_val(tip,func){
this.tips=tip;
this.val_func=func;
this.on_suc=null;
this.on_error=null;
}
Man_val.prototype.validate=function(fd){
if(this.val_func(fd)){
this.on_suc();
}else{
this.on_error();
}
}

저희가 사용하는 사용자 양식은 类来做一个入口，构造的时候传入Field对象列表，并且将
每一个控件의 onblur事件绑定到validate 包装器上

复代码 代码如下:

function UserForm(items){
this.f_item=items; //자세한 내용은 다음과 같습니다.
for(idx=0;idxvar fc=this.get_check(this.f_item[idx] ); //获取封装后的回调事件
$("#" this.f_item[idx].field_id).blur(fc); //결정적 결정
}
}
//결정적 관리 {
return function(){ //返回包装了调用validate 방법론적 사건
v.validate();
}
}

接下来需要定义一个方法来绑定提交按钮的onclick事件：

复代代码 代码如下:

//绑定提交事件到元件
UserForm.prototype.set_submit=function(bid,bind){
var self= 이것;
$("#" bid).click(
function(){
if(self.validate()){
bind();
}
}
);
}

这里提到了一个UserForm의 유효성 검사 방법,如下：

复代码代码如下:

//验证所유적문자段
UserForm.prototype.validate=function(){
for(idx in this.f_item){ //循环每一个验证器
this.f_item[idx].validate(); //再检测一遍
if(!this.f_item[idx].checked){
return false; //如果错误就返回失败，阻止提交
}
}
return true; // 一个都没错就返回成功执行提交 }


最后用一个例子来看看怎么用 ：

复主代码 代码如下:

<머리>





<스타일>
.suc { 배경색:#00ff00;}
.error { 배경색:#ff0000;}


<본문>

要注의료적 지역방就是在循环中使用闭包会tea几，必须用一个方法来代理一下，呵呵


希望对初文但是还不知道该做点什么怎么做的朋友能有所帮助