antD vue input输入限制以及提示

时间:2024-03-08 15:19:30

原创:https://blog.csdn.net/XUELUO123456789/article/details/103144534

转载注明出处

1.定义表单输入框中的值的规则
在ant design vue中, "v-decorator"可以看成是v-model,和vue中的双向绑定作用类似
——v-decorator="[id, options]"
其中的id:必填输入控件唯一标志。支持嵌套式的写法。——算是一个普通的id名
options:一般是书写对于表单框中的值的验证 ——即 validatorRules.(自定义的变量值)

2.书写表单规则

rules:支持多个api(官网中有说)
len:字段长度 number
max:最大长度 number
message:校验文案(即提醒信息) string
min:最小长度 number
pattern:正则表达式校验 RegExp
required:表单框是否必填 boolean
validator: 自定义校验规则(校验函数) function(rule,value,callback)
whitespace: 必填时空格是否会被视为错误

 validatorRules:{
          //修改
          name:{
            rules:[             //rules是验证规则,
              {
                required:true,       //是否为必填,否则将会出现提示信息
                message:\'请输入团名称\'      //当输入框为空时,呈现出的提示信息
              },
              {
                validator:this.checkName    //自定义的校验函数
              }
            ]
          }
          //修改
        },