ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Ant Design表单验证规则

2021-11-04 18:03:04  阅读:391  来源: 互联网

标签:idcardReg Note const Za value 表单 Ant callback Design


1、vue 页面代码

<a-spin :spinning="confirmLoading">
  <a-form :form="form">
    <a-form-item
      label="bizCode"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      has-feedback="">
    <a-input placeholder="请输入bizCode"
      v-decorator="['bizCode', {rules: [
        {required: true, message: '请输入bizCode!'},
        { min: 3, max: 4, message: 'bizCode需在2-4位之间', trigger: 'blur' },
        {required: true, message: '请填写邮箱!'},
        {validator:EmailValidator}
      ]}]"/>
</a-form-item>

2、vue 验证规则代码

methods: {
  EmailValidator(rule, value, callback){
    const idcardReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
    if (!idcardReg.test(value)) {
      // eslint-disable-next-line standard/no-callback-literal
      callback('邮箱格式不正确')
    }
    // Note: 必须总是返回一个 callback,否则 validateFieldsAndScroll 无法响应
    callback()
  }
}

3、其他的一些验证规则

// 手机号验证
    MobileNumberValidator (rule, value, callback) {
      const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/
      if (!idcardReg.test(value)) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('非法格式')
      }
      // Note: 必须总是返回一个 callback,否则 validateFieldsAndScroll 无法响应
      callback()
    },
    // 邮箱验证
    EmailValidator (rule, value, callback) {
      const idcardReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
      if (!idcardReg.test(value)) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('非法格式')
      }
     // Note: 必须总是返回一个 callback,否则 validateFieldsAndScroll 无法响应
      callback()
    },
    // 身份证验证 
    IDValidator (rule, value, callback) {
      const idcardReg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
      if (!idcardReg.test(value)) {
      // eslint-disable-next-line standard/no-callback-literal
        callback('非法格式')
      }
      // Note: 必须总是返回一个 callback,否则 validateFieldsAndScroll 无法响应
      callback()
    }

标签:idcardReg,Note,const,Za,value,表单,Ant,callback,Design
来源: https://www.cnblogs.com/KleinBlue/p/15509403.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有