ant vue中表单中的校验

前言：ant-vue中fom表单使用与校验
注意：表单域中必须用 <a-form :form="form"> 表单域 </a-form>包裹，且必须要注册form

vue中template标签内

<a-row>
  <a-col :span="12">
    <a-form-item label="label名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
      <a-input placeholder="请输入label名称" v-decorator="[ ‘firephone‘,validatorRules.firephone ]" />
    </a-form-item>
  </a-col>
</a-row>

校验规则写在 data函数内部 与return同级

  // 手机号 座机号 校验规则
  let limitphone = (rule,value,callback)=>{
    const mobilePhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ //手机号
    const telPhone = /\d{3}-\d{8}|\d{4}-\d{7}/ //座机号
    if(value == "" || value == null || value == undefined){
      callback()
    }else if(value.includes("-")){
      if (!telPhone.test(value)) {
        callback(‘请输入电话号码或手机号码‘)
      }else{
        callback()
      }
    }else{
      if (!mobilePhone.test(value)) {
        callback(‘请输入电话号码或手机号码‘)
      }else{
        callback()
      }
    }
  }

export default内data函数中

validatorRules:{
  firephone:{
    rules:[{ validator: limitphone, trigger: ‘blur‘}] // validator 自定义校验，trigger 收集子节点的值的时机
  },
}

.......更多校验规则

  // 小数校验
  let latIsDil = (rule,value,callback)=>{
    const IsDil = /^([0-9]{1,}[.][0-9]*)$/
    if(value == "" || value == null){
      callback()
    }else if(!IsDil.test(value)){
      callback(‘请输入小数‘)
    }else{
      callback()
    }
  }

  // 正整数校验
  let indicatorprecisionPass = (rule,value,callback)=>{
    const Ispir = /^$|^\s*[1-9]\d*\s*$/
    if(value == ""){
      callback(new Error(‘请输入正整数‘))
      // callback() 若非必填项，值为空，undefined，null，直接调用callback()回调函数即可
    }else if(value == null){
      callback(new Error(‘请输入正整数‘))
    }else if(!Ispir.test(value)){
      callback(new Error(‘请输入正整数‘));
    }else{
      this.indicatorprecisionNum = value
      callback()
    }
  }

   // 动态校验保留几位小数
  let lowerlimitPass = (rule,value,callback) => {
    if(value == ""){
      callback()
    }else if(value == null){
      callback()
    }else if(!this.Issmallnum(this.indicatorprecisionNum,value)){
      callback(new Error(‘请保留‘+this.indicatorprecisionNum+‘位小数‘));
    }else{
      callback()
    }
  }

  methods:{
  //校验=> 动态 保留几位小数
  Issmallnum(target,str){
    var g = eval(‘/^[+-]?\\d+(?:\\.\\d{‘+target+‘})?$/‘)
    return g.test(str)
  },
}

ant vue中表单中的校验

原文：https://www.cnblogs.com/melancholys/p/14926409.html