Vue-ANTD 表单输入中自定义校验一些正则表达式规则

Vue-ANTD 表单输入中自定义校验一些正则表达式规则


写一个示例:
表单的rules里面添加自定义校验的方法:

{ rules: [  {validator: this.checkPhone} ] }

在下面的method里面添加方法:

    checkPhone (rule, value, callback) {
      const pwdRegex = new RegExp('^[1-9]\\d{0,11}$')
         if (!pwdRegex.test(value)) {
        callback(new Error('电话号码输入格式有误'))
      }  
       callback()
    },

1.校验输入为电话号码(手机号码)

^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$

2.校验输入为是否为邮箱

/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/

3.校验是否全部为数字且有一范围:

^[1-9]\\d{0,11}$ 或者 ^[1-9]\d{0,11}$

4.校验输入包含数字+字母+特殊符号:

^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}$

5.校验输入包含字母加数字
其实这三者可以随意组合的
有些两边要加引号,有些不加,都试试吧

'^[A-Za-z0-9]{6,6}$'

6.输入0-10的整数,输入1-999的整数

/^([0-9]|10)$/
/^(?!0)\d{1,3}$/

后面还会添加更多常用规则

更多规则点击这里

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于ant-design-vue表单自定义校验规则,你可以使用Vue的"自定义校验器"来实现。下面是一个简单的示例: 1. 首先,你需要在Vue组件定义一个自定义校验器函数,该函数接收两个参数:rule和value。rule是当前校验规则的配置,value是当前表单字段的值。校验器函数需要返回一个Promise对象,通过resolve()来表示校验通过,通过reject()来表示校验失败。 ```javascript // 导入所需的校验规则 import { ValidationRule } from 'ant-design-vue/es/form/Form'; // 定义校验器函数 const customValidator = (rule, value) => { return new Promise((resolve, reject) => { // 自定义校验逻辑 if (value === 'custom') { resolve(); } else { reject(new Error('输入值不合法')); } }); }; ``` 2. 在表单项的rules属性使用自定义校验器函数。rules属性是一个数组,可以包含多个校验规则。在自定义校验规则,你可以使用ValidationRule对象提供的方法来定义校验规则的其他配置。 ```javascript <template> <a-form :form="form"> <a-form-item label="自定义校验"> <a-input v-decorator="['customField', { rules: [{ validator: customValidator }] }]"></a-input> </a-form-item> <!-- 其他表单项 --> <!-- ... --> </a-form> </template> <script> export default { data() { return { form: this.$form.createForm(this), }; }, }; </script> ``` 这样,当用户输入的值不等于'custom'时,校验器函数将返回一个带有错误信息的Promise对象,从而触发表单项的校验错误提示。 以上就是使用ant-design-vue实现表单自定义校验规则的方法。你可以根据自己的需要编写更复杂的校验逻辑,并在自定义校验器函数进行处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值