ant vue中表单中的校验

Posted 2021-06-24 MELANCHOLY

前言：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)
  },
}