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自定义验证去做,要逐层拆属性,着实有点麻烦。

     

  • 相关阅读:
    Linux用户配置sudo权限(visudo)
    Memcached 实战
    安装完centos7 root目录下的文件anaconda-ks.cfg
    通过命令查看centos机器公网ip
    .env修改后不生效
    laravel事务回滚失败
    windows10 PHP7 Sqlserver 扩展
    PHP生成html格式数据字典
    服务器初始化脚本
    PHP导出Excel表格实例
  • 原文地址:https://www.cnblogs.com/dongzhi1111/p/11414209.html
Copyright © 2011-2022 走看看