Fork me on Gitee

ant design vue 中的表单校验 v-decorator

1.v-decorator和v-model区别
v-decorator在我看来更加适合于有验证的操作,比如不为空,唯一值,只能是数字等等。而v-model更加适合用来定义一些组件返回的接收参数,更好处理和获取,以及一些默认隐藏或者不显示但保存或修改需要用到的参数。

2.v-decorator的用法
部分测试代码

......
<a-form-item label="name" :labelCol="labelCol" :wrapperCol="wrapperCol" class="x-form-item">
  <a-input v-decorator="['name']" placeholder="请输入名字" @change="changeMe"></a-input>
</a-form-item>
<a-form-item label="id" :labelCol="labelCol" :wrapperCol="wrapperCol" class="x-form-item">
  <a-input v-decorator="['id']" placeholder="请输入id"></a-input>
</a-form-item>
......

2.1 获取v-decorator的值

methods: {
    changeMe(selectedValue) {
        //selectedValue就是当前触发字段的值,也可以用下getFieldValue获取,但是有些组件好像获取在赋值前,可能需要加延迟
        this.form.getFieldValue('name')
     } 
}

2.2 设置v-decorator的值

methods: {
    changeMe(selectedValue) {
        this.form.setFieldsValue({
             name: "值",//
             id: res.result.id,//最后一个逗号随意
           });
     } 
}

2.3 v-decorator在form表单的验证:

部分前端代码

......
<a-form-item label="名字" :labelCol="XTwoLabelCol" :wrapperCol="XTwoWrapperCol" class="x-form-item">
 <a-input v-decorator="['name', validatorRules.name]" placeholder="请输入"></a-input>
</a-form-item>
<a-form-item label="数字" :labelCol="XTwoLabelCol" :wrapperCol="XTwoWrapperCol" class="x-form-item">
 <a-input v-decorator="['number', validatorRules.number]" placeholder="请输入"></a-input>
</a-form-item>
......

验证:

data() {
   return {
           form: this.$form.createForm(this),
           validatorRules: {
          name: {//name与v-decorator中属性对应
            initialValue: "水",//初始化值,也就是默认值 
            rules: [
              { required: true, message: '请输入检验日期!'},//此处开启校验必填
              {validator: (rule, value, callback) => validateDuplicateValue('em_project_info', 'project_name', value, this.model.id, callback)},//此处开启唯一验证,
              { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},//此处配置正则表达式,手机号,可自己配置正则表达式
            ]
            },
          number: {//name与v-decorator中属性对应
            rules: [
              { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},//此处配置正则表达式,手机号,可自己配置正则表达式
            ]
            },
        },
        
   }
}

校验配置:

默认时间:

initialValue: moment(new Date()).format("YYYY-MM-DD"),//,此处一定要导入import moment from "moment"; 

必填:

rules: [
    { required: true, message: '请输入检验日期!'}
]

校验唯一值:

rules: [
     {validator: (rule, value, callback) => validateDuplicateValue('表名', '验证唯一值的字段', value, this.model.id, callback)},
]

正则表达式验证:

rules: [
     { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},//pattern为正则表达式,message为提示信息,正则表达式可以根据自己需求来设置。此处注意在/正则表达式/。在俩斜杠之间位正则表达式。
]

2.4 JEditableTable的验证:

部分代码:此处包含唯一验证,必填验证,正则表达式验证

columns: [
 {
   title:'名称',
   align:"center",//居中显示
   width: '280px',//宽度
   ellipsis: true,
   key: 'name',//字段名
   type: FormTypes.input,//表示以input标签显示
   placeholder: '请输入${title}',//提示信息
   validateRules: [
     {
       required: true,//在前端设置此字段必填
       message: '${title}不能为空',//在前端设置此字段不能为null,提示文本
       // 自定义函数校验 handler,表单验证,此处为唯一性验证
       handler(type, value, row, column, callback, target) {
         //验证sampleName不能重复
         let { values } = target.getValuesSync({ validate: false })
         let count = 0
         for (let val of values) {
           if (val['name'] === value) {//什么字段就传什么参数,
             if (++count >= 2) {
               callback(false, '${title}不能重复')
               return
             }
           }
         }
         callback(true) // true = 通过验证
       }
     }
   ],
 },
 {
   title:'数量',
   align:"center",
   //dataIndex: 'number'
   width: '140px',
   ellipsis: true,
   key: 'number',
   type: FormTypes.input,
   placeholder: '请输入${title}',
   validateRules: [
     { pattern:  /^[1-9]\d*$/, message: '请输入正整数!'},//正则表达式验证,正整数
   ]
 },
}

2.5 v-decorator的其他知识点

去空字符串

v-decorator.trim="[ 'dictCode', validatorRules.dictCode]"//v-decorator.trim为去空操作

 

 

rules:[{validator:(rule, value, callback)=>validateDuplicateValue('表名','验证唯一值的字段', value,this.model.id, callback)},]

posted @ 2021-03-15 10:23  等风的羽毛  阅读(15762)  评论(2编辑  收藏  举报
1