zoukankan      html  css  js  c++  java
  • vue 输入框数字、中文验证

       vue项目是基于element框架做的,在做form表单时,要做些验证,element框架也提供了自定义验证

       下面是一些常见的验证

       只允许输入数字:

          可以直接用框架的rule去验证,但必须在model后加上number

        <el-form-item label="姓名:">
              <el-input v-model.number="num"></el-input>         
           </el-form-item>
    
        num: [
            {required: true, message: '请输入数量'},
            {type: 'number', message: '数量必须为数字值'}
          ],

       只允许输入数字和小数:   

        <el-input v-model="items.volume" oninput="value=value.replace(/[^d.]/g,'')"></el-input>

       过滤中文:    

        <el-input v-model="form.trailer.so_no"  oninput="value=value.replace(/[u4e00-u9fa5]/g, '')"></el-input>

       补充:

        由于使用了<el-form>组件,添加了rules验证规则,导致与oninput事件的验证规则发生了冲突,所以修改如下

        

        <el-input v-model="form.trailer.so_no"  oninput="value=value.replace(/[u4e00-u9fa5]/g, '')"  @change="deal(index,indexs,$event,'volume')"></el-input>
        deal(index,indexs,value,prop){
            this.form.sark_type[index].child[indexs][prop]=value
          },

        对当前属性重新赋值,也可以把oninput事件的验证移到change事件,不过这样验证只能在失焦的时候触发

        ps:由于属性层级较多,包含了多层数组,通过element自定义验证去做,要逐层拆属性,着实有点麻烦。

     

  • 相关阅读:
    bzoj4028 [HEOI2015]公约数数列
    bzoj4766 文艺计算姬
    bzoj4241 历史研究
    bzoj3744 Gty的妹子序列
    bzoj4540 [Hnoi2016]序列
    uoj#228 基础数据结构练习题
    bzoj2467 [中山市选2010]生成树
    bzoj2125 最短路
    bzoj4800 [Ceoi2015]Ice Hockey World Championship
    bzoj2463 [中山市选2009]谁能赢呢?
  • 原文地址:https://www.cnblogs.com/dongzhi1111/p/11414209.html
Copyright © 2011-2022 走看看