vue 输入框数字、中文验证

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

   下面是一些常见的验证数组

   只容许输入数字:

      能够直接用框架的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>

 

   补充:ui

    因为使用了<el-form>组件,添加了rules验证规则,致使与oninput事件的验证规则发生了冲突,因此修改以下this

    

    <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事件,不过这样验证只能在失焦的时候触发spa

    ps:因为属性层级较多,包含了多层数组,经过element自定义验证去作,要逐层拆属性,着实有点麻烦。code

相关文章
相关标签/搜索