antd 表单自定义校验validator、pattern

1、自定义校验:validator

    在写的自定义校验的方法中,加入callback(), 当不满足条件时,要传入‘错误提示的字符’,例如:callback('手机号为必填')(如果不传,则当输入内容不满足条件时,在表单的校验中不出现错误)

例子:手机号+区号  只能自定义校验
	
	1.1、
	   <a-form-item v-bind="formItemLayout" label="手机号码" :validate-status="phoneStatus" :help="phoneHelp">
          <a-input placeholder="请输入手机号码"
            v-decorator="[
              'phoneNum',
              { 
                rules: [{ validator:checkPhone,trigger:'blur'}],
              },
            ]"
          >
            <a-select
              slot="addonBefore"
              style="width: 70px"
              v-decorator="[
                'phoneArea',
                { 
                  rules: [{validator:checkArea,trigger:'change'}],
                },
              ]"
            >
              <a-select-option value="+86">
                +86
              </a-select-option>
              <a-select-option value="+852">
                +852
              </a-select-option>
            </a-select>
          </a-input>
        </a-form-item>

1.2、
   phoneStatus: "success" , // 手机号验证结果标志
   phoneHelp: '' , // 手机号验证结果文字

1.3、

   checkPhone (rule,value,callback) { // 输入手机号验证
	      let phoneArea = this.form.getFieldValue('phoneArea').substring(1)// 区号
	      let checkR = this.phoneReg(phoneArea,value)
	      checkR ? callback() : callback('手机号为必填') //错误时要返回字符串类型
	    },
	    checkArea (rule,value,callback) { // 区号选择验证
	      let phoneNum = this.form.getFieldValue('phoneNum')// 手机号
	      let areaV = value.substring(1)
	      let checkR = this.phoneReg(areaV,phoneNum)
	       checkR ? callback() : callback('区号为必选')
	    },
	    phoneReg (areaC, phoneC) { 
	      let localReg = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:(?:10|4[01])\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$/
	      let hkReg = /^(852)?(5[1234569]\d{6}|6\d{7}|9[0-8]\d{6})$/ // 香港手机号
	      if (areaC == '86') {
	        if (localReg.test(areaC+phoneC)) {
	          this.phoneStatus = "success" 
	          this.phoneHelp="" 
	          return true
	        } else {
	          this.phoneStatus = "error"
	          this.phoneHelp="请输入正确手机号"
	          return false
	        }
	      } else {
	        if ( hkReg.test(areaC+phoneC)) {
	          this.phoneStatus = "success"
	          this.phoneHelp=""
	          return true
	        } else {
	          this.phoneStatus = "error"
	          this.phoneHelp="请输入正确手机号"
	          return false
	        }
	      }
	    },

2、自定义校验:pattern 使用正则方式

<a-input v-decorator="['contacts_number',
		{rules:[
			{required: true,message:'请输入号码'},
			{pattern:new RegExp(/\.$/,'g'),message:'请输入正确号码'}]}]" 
/>

备注:pattern 写法 1、: pattern: /\.$/          注意是正则,不是字符串,所以不能加''

                        写法 2、: pattern:new RegExp(/\.$/,'g')


版权声明:本文为Hua_explore原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。