사용자 편집 정보 및 저장과 관련된 모든 페이지에는 데이터가 요구 사항을 충족하는지 확인하고 클라이언트 및 서버 측에서 확인해야합니다.
고객 서비스 측면에서의 확인은 주로 사용자 경험을 향상시키기위한 것이며 서버 측의 확인은 데이터 준수를 보장하는 것입니다.
이 플러그인은 또한 귀하를위한 양식 확인을 지원합니다. 필수 추가 : 검증 해야하는 열의 구성에 충실하십시오. 폼 요소 앞에서 레이블을 재생시킬 때, a *는 레이블 앞에서 자동으로 생성되며, 이는 데이터가 다시 열되도록 프롬프트에 사용됩니다.
확인이 사용됩니다. 특정 사용은 jQuery 검증의 API를 참조하십시오.
코드는 다음과 같습니다 (페이지 주소 : https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form5-validation.html) :
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 양식 검증 </title> <meta name = "viewport"content = "width = device-width, 초기-스케일 = 1"> <링크 rel = "stylesheet"href = "<! Rel = "Stylesheet"href = "../ css/site.css"> <script src = "../ lib/jquery.js"> </script> <script src = "../ lib/jquery.validate.js"> </script> <script src = "../ lib/bootstrap.js">-script 메소드-> <script src = "../ scripts/global.js"> </script> <!-플러그인-> <script src = "../ scripts/plugin.js"> </script> </head> <body> <div> <div> <div> <div> <div> <div> </lable> <div> <div> <div> </label> action = "#"id = "formcontainer"> </form> </div> <div> <div> <lable> 소개 </label> </div> <label> 양식 검증 </h3> <blockquote> <p> 유효성 검사를 위해 jQuery 유효성을 사용하십시오. 다른 확인 방법은 jQuery 유효성 검사를 참조하십시오. Custom Verification global.fn.setDefaultValidator () Global.js 파일의 메소드, 파일은 도구 파일로 변경되어 양식 직렬화, 날짜 형식, 배열 판단 설정, 기본 확인 설정, 디스플레이 메시지, 팝업 창, 초기화, 파일 다운로드, 양식 저장 등 </p> </p> </p> </p> </blockquote>를 포함한 많은 도구 메소드를 정의합니다. eles = [{label : {text : 'custom 사용자 이름 : '}, ele : {type :'text ', name :'username ', 제목 :'username : ', required : true}}, {ele : {type :'radio ', nam e : 'sex', 제목 : '성별 :', 항목 : [{text : 'male', value : 1}, {text : 'female', value : 2}}}, {ele : {type : 'checkbox', 이름 : 'plant', 제목 : '플랫폼 사용 :', 항목 : [{text : 'app', value : 'app'}, {text : 'web', value : 'web'}}} ], [{ele : {type : 'select', name : 'province', title : 'province :', 'province :', withnull : true : [{text : 'guangdong', 'value :'gd '}, {value :'hn '}]}}, {eLe :'<input type = "radio"> '}, type :'text ', name :'displayName ', 제목 :'display name : 'ele}, {ele : {type :'search : 'search', title : 'product', id : 'productName', required : 'true}}], [{ele : {type :'dateTime ','fromEdate ', 제목 :'validation '}}, {ele : {type :'dateTime ', 이름 :'Todate ', title :'~ '},]]; '1,3'}). render ( 'formcontainer', function (bf) {var Model = {PrimaryKey : 1, 사용자 이름 : 'xxg', 섹스 : 1, 식물 : [ 'app', 'web'], Province : 'GD', displayName : 'test', productName : 'noteb Ook ', Fromedate :'2015-06-10 ', Todate :'2015-08-08 '}; bf.initformdata (model);}); $ ( "#btnsubmit"). bind ('click ', function () {if (! $ ( "#formcontainer"). valid ()) {alert ( "villification delting!");} else {var postdata = bsform.getformdata (); "획득 된 표현 데이터는 :"+json.stringify (postdata)); global.fn.setDefaultValidator (); // 확인 규칙 정의 $ ( "#formContainer"). Validate ({username : {username : {require : minlength : 3, maxlength : 3, maxlength : 10}, upledtname : {require : true}}});}); </html> </html>사용자 이름 열은 필수 채우기 및 길이 검증으로 구성됩니다. 실행중인 인터페이스는 사용자 이름 값을 삭제합니다. 양식을 제출할 때 효과를 볼 수 있습니다.
렌더링은 다음과 같습니다.