3939< body >
4040 < form id ="submitForm ">
4141 < input type ="text " name ="username " placeholder ="用户名 " />
42- < p id ="username "> </ p >
42+ < p class =" error-box " id ="username "> </ p >
4343
4444 < input type ="password " name ="pwd " placeholder ="密码 " />
45- < p id ="pwd "> </ p >
45+ < p class =" error-box " id ="pwd "> </ p >
4646
4747 < input type ="password " name ="repeatPwd " placeholder ="确认密码 " />
48- < p id ="repeatPwd "> </ p >
48+ < p class =" error-box " id ="repeatPwd "> </ p >
4949
5050 < input type ="number " name ="phoneno " placeholder ="手机号 " />
51- < p id ="phoneno "> </ p >
51+ < p class =" error-box " id ="phoneno "> </ p >
5252
5353 < input type ="text " name ="str " placeholder ="中文 1-4 位 " />
54- < p id ="str "> </ p >
54+ < p class =" error-box " id ="str "> </ p >
5555
5656 < button id ="submitButton " type ="button "> 提交</ button >
5757 </ form >
6464 /**
6565 * 注意:此demo比较简单,请结合实际项目修改
6666 */
67- var submitForm = document . getElementById ( 'submitForm' ) ;
68- var submitButton = document . getElementById ( 'submitButton' ) ;
6967
7068 var validatorInstance = new WeValidator ( {
7169 multiCheck : true ,
7270 onMessage : function ( data ) {
71+ console . log ( 'onMessage' ) ;
7372 console . log ( data ) ;
7473
7574 for ( var name in data ) {
76- let ele = document . getElementById ( name )
77-
78- if ( ele ) {
79- ele . innerHTML = data [ name ] . msg
80- }
75+ $ ( '#' + name ) . html ( data [ name ] . msg )
8176 }
8277 } ,
8378 rules : {
117112 }
118113 } ) ;
119114
120- submitButton . onclick = function ( ) {
121- var data = $ ( submitForm ) . serializeObject ( ) ;
115+ // 提交
116+ $ ( '#submitButton' ) . on ( 'click' , function ( ) {
117+ var data = $ ( '#submitForm' ) . serializeObject ( ) ;
122118
123- console . log ( data )
124- clearError ( )
125- if ( ! validatorInstance . checkData ( data ) ) return ;
119+ console . log ( data )
126120
127- console . log ( '开始提交' ) ;
128-
129- return false
130- }
121+ $ ( '.error-box' ) . html ( '' )
131122
132- function clearError ( ) {
133- var eles = document . querySelectorAll ( 'p' )
123+ if ( ! validatorInstance . checkData ( data ) ) return ;
134124
135- eles = [ ] . slice . call ( eles )
136-
137- for ( var i = 0 ; i < eles . length ; i ++ ) {
138- eles [ i ] . innerHTML = ''
139- }
140- }
125+ console . log ( '开始提交' ) ;
126+ } )
141127 </ script >
142128</ body >
143129</ html >
0 commit comments