美文网首页
ant-design-vue 自定义表单元素验证

ant-design-vue 自定义表单元素验证

作者: 哈哈乐乐WXT | 来源:发表于2020-04-08 11:03 被阅读0次
 <a-form-item label="金额"
                     v-bind="formItemLayout">
          <a-input-number style="width: 100%"
                          placeholder="输入金额"
                          addonAfter="元"
                          @change="onChangeAmount"
                          v-decorator="['amount',
                   {rules: [
                    {required: true, message: '请输入金额'},
                    {validator: checkAmount }
                  ]}]" />

在method下写验证checkAmount 函数,代码如下:

checkAmount (rule, value, callback) {
  //验证金额
  const number = Number(value);
  //前半部分正则验证最多可包含两位小数的数字,后部分验证必须为非负数(正则需求自行定义)
  if (!(/^[0-9]+(.?[0-9]{1,2})?$/.test(value))|| value < 0) {
    // 如果需要返回 error msg,就把它传给 `callback()`
    callback('请输入最多包含两位小数的正数');
  } else {
    // 如果通过校验,调用无参数的 `callback()` 即可
    callback();
  }
},

相关文章

网友评论

      本文标题:ant-design-vue 自定义表单元素验证

      本文链接:https://www.haomeiwen.com/subject/obbzphtx.html