美文网首页
ant-design vue form表单自定义校验规则

ant-design vue form表单自定义校验规则

作者: Rose_yang | 来源:发表于2019-11-07 10:13 被阅读0次
    <a-form-item
      label='num'
    >
      <a-input
        v-decorator="['num', validateRulesObj.num]"
        placeholder="请输入"/>
    </a-form-item>
    
    <script>
    export default {
      data () {
        return {
          validateRulesObj: { // 自定义校验
            num: {
              // 账号或者卡号  必填  长度8-28  以数字开头
              rules: [
                {
                  required: true,
                  validator: (rule, value, cbfn) => {
                    if (!value) {
                      cbfn('请输入num')
                    } else if (!value.trim().length) {
                      cbfn('请输入num')
                    } else if (value.trim().length < 8 || value.trim().length > 28) {
                      cbfn('请输入正确格式的 num')
                    } else if (isNaN(value.substring(0, 1) - 0)) {
                      cbfn('请输入正确格式的 num')
                    }
                    cbfn()
                  }
                }
              ]
            }
          }, // 输入框校验规则
          money: { // 金额   必填 数字 限制大小  小数点后只能两位小数
              rules: [
                {
                  required: true,
                  validator: (rule, value, cbfn) => {
                    if (!value) {
                      cbfn('请输入金额')
                    } else if (!value.trim().length) {
                      cbfn('请输入金额')
                    } else if (isNaN(value)) {
                      cbfn('请输入正确的金额')
                    } else if (Number(value) > Number(this.avalible)) {
                      cbfn('金额已超出可用金额')
                    } else if (value.indexOf('.') > -1 && value.toString().split('.')[1].length > 2) {
                      cbfn('请输入正确的提现金额,小数点后保留两位数字')
                    }
    
                    cbfn()
                  }
                }
              ]
            }
        }
      }
    }
    </script>
    
          validateRulesObj: {
            type: {
              rules: [
                {
                  required: true,
                  message: '请选择'
                }
              ]
            },
            price: {
              rules: [
                {
                  required: true,
                  validator: function (rule, value, cbfn) {
                   //  let reg = /^\d+$|^\d+\.\d+$/   // 可以0开头
                   let reg = /^[1-9][0-9]*$|^[1-9][0-9]*\.\d+$/   // 不能0开头
                    if (!value.trim().length) {
                      cbfn('请填写价格')
                    } else if (!reg.test(value.trim())) {
                      cbfn('请填写价格,为大于等于0的数字')
                    }
                    cbfn()
                  }
                }
              ]
            },
            quantity: {
              rules: [
                {
                  required: true,
                  validator: function (rule, value, cbfn) {
                    // let reg = /^\+?[1-9][0-9]*$/ // 正整数 可输入加号
                    let reg = /^[1-9][0-9]*$/ // 正整数
                    if (!value.trim().length) {
                      cbfn('请填写数量')
                    } else if (!reg.test(value.trim())) {
                      cbfn('请填写数量,为大于等于0的整数')
                    }
                    cbfn()
                  }
                }
              ]
            }
          }, // 输入框校验规则
    
       validateRulesObj: {
            tradeAmount: {
              rules: [
                {
                  required: true,
                  validator: (rule, value, cbfn) => {
                    if (!value) {
                      cbfn('请输入提现金额')
                    } else if (!value.trim().length) {
                      cbfn('请输入提现金额')
                    } else if (isNaN(value)) {
                      cbfn('请输入正确的提现金额')
                    } else if (Number(value) > Number(this.avalibleAmount)) {
                      cbfn('提现金额已超出可用金额')
                    } else if (value.indexOf('.') > -1 && value.toString().split('.')[1].length > 2) {
                      cbfn('请输入正确的提现金额,小数点后保留两位数字')
                    }
    
                    cbfn()
                  }
                }
              ]
            }
          }
    
      discount: {
            rules: [
              {
                required: true,
                validator: function (rule, value, cbfn) {
                  let reg = /^[0-9][0-9]*$/ // 正整数
                  if (!value.trim().length) {
                    cbfn('请输入')
                  } else if (!reg.test(value.trim())) {
                    cbfn('非法输入,只能输入整数')
                  }
                  cbfn()
                }
              }
            ]
          },
    

    相关文章

      网友评论

          本文标题:ant-design vue form表单自定义校验规则

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