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)
  },
}