铁雪资源网

Vue表单验证插件Vue Validator使用方法详解
站长资源 2024/12/23 佚名
70 1538
铁雪资源网 Design By www.gsvan.com

Vue-validator 是Vue的表单验证插件，供大家参考，具体内容如下

Vue版本： 1.0.24
Vue-validator版本： 2.1.3

基本使用

<div id="app">
 <validator name="validation">
  <form novalidate>
   <div class="username-field">
    <label for="username">username:</label>
    <input type="text" id="username" v-validate:username="['required']" />
   </div>
   <div class="comment-filed">
    <label for="comment">comment:</label>
    <input type="text" id="comment" v-validate:comment="{maxlength: 256}" />
   </div>
   <div class="errors">
    <p v-if="$validation.username.required">请输入你的名字</p>
    <p v-if="$validation.comment.maxlength">您的评论太长了</p>
   </div>
   <input type="submit" value="send" v-if="$validation.valid" />
  </form>
 </validator>
</div>


<script src="/UploadFiles/2021-04-02/vue.js">


将要验证的表单包裹在validator自定义元素指令中，而在要验证的表单控件元素的 v-validate 属性上绑定相应的校验规则。


验证结果会保存在组建实例的 $validation 属性下。 $validation 是由 validator 元素和 name 属性和 $ 前缀组件


验证结果结构





{
 // 表单整体验证
 "valid": false, // 字段校验是否通过 
 "invalid": true, // valid 取反
 "touched": false, // 校验字段所在元素获得通过焦点时返回true，否则返回false
 "untouched": true, // touched 取反
 "modified": false, // 当元素值与初始值不同时返回true，否则返回false
 "dirty": false, // 字段值改变过至少一次返回true，否则返回false 
 "pristine": true, // dirty 取反
 // 字段单一验证
 "username": {
  "required": true,
  "modified": false,
  "pristine": true,
  "dirty": false,
  "untouched": true, 
  "touched": false,
  "invalid": true,
  "valid": false
 },
 "comment": {
  "maxlength": false,
  "modified": false,
  "pristine": true,
  "dirty": false,
  "untouched": true,
  "touched": false,
  "invalid": false,
  "valid": true
 }
}






校验结果由两部分组成。表单整体校验结果和单个字段校验结果。


验证器语法


v-validate 指令语法：


v-validate[:field]=”array literal | object literfal | binding”


校验字段名field


field用来标识校验字段，之后可以用该字段来引用校验结果


v-validate 指令用来定义校验规则，其值可以是数组字面量，对象字面量，组件实例数组属性名。


数组字面量


当校验器不需要额外参数时，可以使用数组字面量形式，如 required 校验器，只要出现就带I表该校验器所在元素是必填项。





<div id="app">
 <validator name="validation">
  <form novalidate>
   Zip: <input type="text" v-validate:zip="['required']" /><br />
   <div>
    <span v-if="$validation.zip.required">邮政编码是必填项</span>
   </div>
  </form>
 </validator>
</div>






对象字面量


对象字面量语法适合需要额外参数的校验器。如限制输入长度的校验器 minlength,需要说明限制长度多少。





<div id="app">
 <validator name="validation">
  <form novalidate>
   ID: <input type="text" v-validate:id="{ required:true, minlength: 3, maxlength: 16 }" />
   <br />
   <div>
    <p v-if="$validation.id.required">ID不能为空</p>
    <p v-if="$validation.id.minlength">你的ID名字太短</p>
    <p v-if="$validation.id.maxlength">你的ID名字太长</p>
   </div>
   <input type="submit" value="send" v-if="$validation.valid" />
  </form>
 </validator>
</div>






还可以用 对象字面量语法通过 rule 字段来自定义验证规则





<div id="app">
 <validator name="validation">
  <form novalidate>
   ID: <input type="text" v-validate:id="{minlength: {rule: 3}, required: true, maxlength: {rule: 16}}" />
   <br />
   <div>
    <p v-if="$validation.id.required">ID不能为空</p>
    <p v-if="$validation.id.minlength">你的ID名字太短</p>
    <p v-if="$validation.id.maxlength">你的ID名字太长</p>
   </div>
   <input type="submit" value="send" v-if="$validation.valid" />
  </form>
 </validator>
</div>






实例数据属性


v-validate 的值可以是组建实例的数据属性。这样可以用来动态绑定校验规则。





<div id="app">
 <validator name="validation">
 <form novalidate>
  ID: <input type="text" v-validate:id="rules" /><br />
  <div>
   <p v-if="$validation.id.required">不能为空</p>
   <p v-if="$validation.id.minlength">你的ID太短</p>
   <p v-if="$validation.id.maxlength">你的ID太长</p>
  </div>
 </form>
 </validator>
</div>

<script src="/UploadFiles/2021-04-02/vue.js">


内置校验规则


vue-validator 内置一些常用的验证规则：


    
  
  • required — 输入值不能为空
    • 
  
  • pattern — 必须匹配pattern表示的正则表达式
    • 
  
  • minlength — 输入值长度不能小于minlength表示的值
    • 
  
  • maxlength — 输入的值不能大于maxlength表示的值
    • 
  
  • min — 输入值不能小于min表示的值
    • 
  
  • max — 输入值不能大于max表示的值
    • 



与v-model同时使用


vue-validator会自动校验通过v-model动态设置的值。





<div id="app">
 <validator name="validation">
  <form novalidate>
   message: <input type="text" v-model="msg" v-validate:message="{required: ture, minlength: 8}" />
   <br />
   <p v-if="$validation.message.required">message不能为空</p>
   <p v-if="$validation.message.minlength">message输入太长位数</p>
  </form>
 </validator>
</div>

<script src="/UploadFiles/2021-04-02/vue.js">


重置校验结果


通过在Vue组件实例上调用$resetValidation();方法来动态重置校验结果。





<div id="app">
 <validator name="validation">
  <form novalidate>
   <div class="username-field">
    <label for="username">username:</label>
    <input type="text" id="username" v-validate:username="['required']" />
   </div>
   <div class="comment-filed">
    <label for="comment">comment:</label>
    <input type="text" id="comment" v-validate:comment="{maxlength: 256}" />
   </div>
   <div class="errors">
    <p v-if="$validation.username.required">用户名不能为空</p>
    <p v-if="$validation.comment.maxlength">输入文字超过256个</p>
    <input type="submit" value="send" v-if="$validation.valid" />
    <button type="button" @click="onReset">Reset Validation</button>
   </div>
   <pre>{{$validation | json}}</pre>
  </form>
 </validator>
</div>

<script src="/UploadFiles/2021-04-02/vue.js">


复选框checkbox







<div id="app">
 <validator name="validation">
  <form novalidate>
   <h1>调查</h1>
   <fieldset>
    
    <legend>请选择水果</legend>
    <input type="checkbox" id="apple" value="apple" v-validate:fruits="{
     required: { rule: true, message: requiredErrorMsg },
     minlength: { rule: 1, message: minlengthErrorMsg },
     maxlength: { rule: 2, message: maxlengthErrorMsg }
     }" />
     
    <label for="apple">Apple</label>
    <input type="checkbox" id="orange" value="orange" v-validate:fruits />
    <label for="orange">Orange</label>
    <input type="checkbox" id="grape" value="grape" v-validate:fruits />
    <label for="grape">Grape</label>
    <input type="checkbox" id="banana" value="banana" v-validate:fruits />
    <label for="banana">Banana</label>
    
    <ul class="errors">
     <li v-for="msg in $validation.fruits">
      <p>{{msg | json}}</p>
     </li>
    </ul>
   </fieldset>
  </form>
 </validator>
</div>

<script src="/UploadFiles/2021-04-02/vue.js">


下拉类表select





<div id="app">
 
 <validator name="validation">
  <form novalidate>
   <select v-validate:lang="{required: true}">
    <option value="">请选择语言</option>
    <option value="javascript">javascript</option>
    <option value="php">php</option>
    <option value="node">node</option>
   </select>
   <div class="errors">
    <p v-if="$validation.lang.required">不能为空！</p>
   </div>
  </form>
 </validator>
 
</div>

<script src="/UploadFiles/2021-04-02/vue.js">


校验状态class


各校验状态都有其对应的class(默认) 也可以自定义校验状态class





<validator name="validation" :classes="{touched: 'touehc-validator', dirty: 'dirty-validator'}">
 <label for="username">username</label>
 <<input type="text" id="username" :classes="{valid: 'valid-username', invalid: 'invalid-username'}" v-validate:username="{required: {rule: true, message: 'required you name!'}}">
</validator>
<!-- classes属性只能在validator元素或应用了v-validate的元素上使用有效 -->






分组校验


vue-validator支持分组校验。例如重复密码功能。





<div id="app">
 <validator name="validation" :groups="['passwordGroup']">
  <form novalidate>
   username: <input type="text" v-validate:username="['required']" /><br />
   password: <input type="password" v-validate:password="{ minlength: 8, required: true }" group="passwordGroup" /><br />
   comfirm password: <input type="password" v-validate:password-comfirm="{minlength: 8, required: true}" group="passwordGroup" />
   <div class="errors">
    <p v-if="$validation.username.required">用户名不能为空</p>
    <p v-if="$validation.password.required">密码不能为空</p>
    <p v-if="$validation.password.minlength">密码不能少于8位</p>
    <p v-if="$validation.password-comfirm.required">重复密码不能为空</p>
    <p v-if="$validation.password-comfirm.minlength">密码不能少于8位</p>
    <p v-if="$validation.passwordGroup.valid">密码不一致</p>
   </div>
  </form>
 </validator>
</div>

<script src="/UploadFiles/2021-04-02/vue.js">


本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。


关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                

                                    标签：
                                        
Vue,Validator,表单验证

                                     

                                
铁雪资源网 Design By www.gsvan.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
铁雪资源网 Design By www.gsvan.com

                        

                            

                                
                                
                                    评论“Vue表单验证插件Vue Validator使用方法详解”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无Vue表单验证插件Vue Validator使用方法详解的评论...

                                    

                                

                            

                        

                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.gsvan.com
                                            
                                                铁雪资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            39,976影音资源
                                        

                                        

                                            144,792福利资源
                                        

                                        

                                            1,817软件资源
                                        

                                        

                                            431,128技术资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
铁雪资源网 Design By www.gsvan.com