vue 表单禁用数字以外的输入
vue 2017-12-29 14:28:48
XML/HTML Code复制内容到剪贴板
  1. <label>  
  2.     <h3>价格</h3>  
  3.     <span><input type="number" v-model="publish_price" pattern="[0-9]*"><i>元</i></span>  
  4.  </label>  

 

只弹出数字键盘

 

 

2、保留一位小数：

XML/HTML Code复制内容到剪贴板
  1. <span><input type="number" v-model="publish_price" v-on:input="inputPrice" /><i>元</i></span>  
  2.   
  3. <script>  
  4. //          价格正则  
  5.             inputPrice(){  
  6.                 var reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1})?$/;  
  7.                 console.log(this.publish_price);  
  8.                 if(!reg.test(this.publish_price)){  
  9.                     this.$toast("最多保留一位小数");  
  10.                     this.publish_price = parseFloat(this.publish_price).toFixed(1);  
  11.                     return false;  
  12.                 }  
  13.             },  
  14. </script>  

 

保留两位小数的正则：

JavaScript Code复制内容到剪贴板
  1. //          价格正则  
  2.             inputPrice(){  
  3.                 var reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/;  
  4.                 console.log(this.publish_price);  
  5.                 if(!reg.test(this.publish_price)){  
  6.                     this.$toast("最多保留一位小数");  
  7.                     this.publish_price = parseFloat(this.publish_price).toFixed(2);  
  8.                     return false;  
  9.                 }  
  10.             },  

 

 

限制表单长度：

XML/HTML Code复制内容到剪贴板
  1. <input type="text" v-model="publish_title" v-on:input="limitTitle">  

 

上面的js部分的截取有问题，这样也可以：

XML/HTML Code复制内容到剪贴板
  1. <input type="text" v-model="publish_title" maxlength="31">  

 

 

JavaScript Code复制内容到剪贴板
  1. data: function() {  
  2.     return {  
  3.         publish_title: "",  
  4.     }  
  5. },  
  6. methods: {  
  7.     limitTitle() {  
  8.         //限制标题长度  
  9.         let title = this.publish_title;  
  10.         let length = title.replace(/[^\x00-\xff]/g, "**").length;//得到输入的字节数  
  11.         let limit = 31;  
  12.         if(length >= limit) {  
  13.             let instance = this.$toast('标题已超出长度');    
  14.             setTimeout(() => {    
  15.                 instance.close();    
  16.             }, 1000);  
  17.             this.publish_title = title.substr(0,limit);  
  18.             return false;  
  19.         }  
  20.     },  

 

 

 

 

 

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/264.html

上一篇 vue判断路由中的name给高亮显示/菜单高亮
下一篇 webpack设置开发环境process.env、打包到指定目录
相关的文章
Powered by yoyo苏ICP备15045725号