Question

formvalidator在thinkphp中怎么用

Answer 1

1. 首先在页面中引入formValidator相关文件  
<link href="/Public/Home/public/css/formValidator/validator.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" 
src="/Public/Home/public/js/formValidator-4.0.1.js"></script> <script type="text/javascript" 
src="/Public/Home/public/js/formValidatorRegex.js"></script> 
  
2. 添加html代码   
<form name="consultForm" id="consultForm" method="post"   >     <ul class="consult">      <li> 
      <span class="txt_lef">Inqury：</span>       <span id="pro_name"></span>      </li>      <li> 
      <span class="txt_lef">Picture：</span> 
      <span><img   id="picture"   src="" /></span>      </li>      <li> 
      <span class="txt_lef"><font class="red">*</font> Email：</span> 
      <span> 
       <input type="text" name="data[user_mail]" id="user_mail"  class="inputConsult" style="width:287px;" maxlength="100"  /> 
      </span> 
      <span id="user_mailTip"></span>      </li>      <li>  
      <span class="txt_lef"><font class="red">*</font> Title：</span> 
      <span> 
       <input type="text" name="data[title]" class="inputConsult" style="width:287px;" maxlength="50" id="title" /> 
      </span> 
      <span id="titleTip"></span>      </li>      <li> 
<span class="txt_lef"><font class="red">*</font> Inqury content：</span> 
      <span>        <textarea 
cols="50" rows="4" class="inputConsult" style="height:auto;"  id="content"  name="data[content]"></textarea> </span>       <span id="contentTip"></span>      </li>      <li> 
      <span class="txt_lef"><font class="red">*</font> Verification code：</span>       <span> 
       <input type="text" name="data[consultCode]"  class="inputConsult" style="width:100px;" maxlength="4" id="consultCode" /> 
      </span> 
      <span> <img src='__APP__/verify/verify' style="cursor:pointer; width:90px; height:34px;" 
onclick="this.src=this.src+'?'+Math.random()" id="imgCheckcode" /> </span> 
      <span><a class="change l ml5 mt10" 
onclick="document.getElementById('imgCheckcode').src=document.getElementById('imgCheckcode').src+'?'+Math.random()" 
style="cursor:pointer; padding-top:3px;">Another</a></span>       <span id="consultCodeTip"></span>      </li>      <li> 
      <span class="txt_lef"></span>       <span> 
       <input id="submit" type="submit" class="btnSubmitConsult" value="" />       </span>      </li>      <li> 
      <span></span>      </li>     </ul>    </form> 
  
3. 添加js代码 
$(document).ready(function(){   
 $.formValidator.initConfig({formID:"consultForm",debug:false,submitOnce:true, 
   onError:function(msg,obj,errorlist
"#errorlist").empty(); 
   $.map(errorlist,function(msg){ 
    $("#errorlist").append("<li>" + msg + "</li>")    }); 
   alert(msg);   }, 
     submitButtonID:"submit",         onSuccess:function(){    submitConsult();    return false;          }, 
  submitAfterAjaxPrompt : 'There are data are asynchronous validation, please wait a moment...'  }); 
 $("#user_mail") 
   .formValidator({onShow:"Please enter your 
email",onFocus:"Email at least 6 characters, at most 100 characters",onCorrect:"Correct"}) 
   .inputValidator({min:6,max:100,onError:"Email address you input length is illegal, please make sure at least six"})   
 .regexValidator({regExp:"email",dataType:"enum",onError:"You enter the email address format is not correct"});    $("#title") 
  .formValidator({onShow:"Please enter the 
title",onFocus:"Title length is 2-50",onCorrect:"Correct"})  
 .inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyError:"Titles are not free on both sides sign"},onError:"The title cannot be empty, please confirm"});  $("#content") 
  .formValidator({onShow:"Please enter the content",onFocus:"Content in 10 ~ 255 
characters",onCorrect:"Correct",defaultValue:""}) 
  .inputValidator({min:10,max:255,onError:"You enter the length of the wrong, please confirm"});   
 $("#consultCode") 
  .formValidator({onShow:"Please Enter Verify 
Code",onFocus:"Please Enter Verify Code",onCorrect:"Correct"})   .inputValidator({min:4,max:4,onError:"You enter the authentication code is not correct"})   .ajaxValidator({ 
   dataType : "html",    type : "post", 
   async : false,//同步方式