VUE表单自定义验证常用正则

VUE表单自定义方法使用与实现

表单验证处调用phoneVerify自定义方法。

rules: {
     phone: [
           {required: true, message: '请输入电话', trigger: 'blur'},
           { validator: phoneVerify, trigger: 'blur' }
      ],
}

phoneVerify自定义方法正则使用。

//手机号验证
var phoneVerify = (rule, value, callback) => {
     if(value){
         var reg =/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
         if(!reg.test(value)){
             callback(new Error('请输入正确的手机号或者座机号格式'));
         }
         callback();
     }
 };

常用正则表达式

密码至少包含 数字和英文,长度6-20

var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;

密码包含 数字,英文,字符中的两种以上,长度6-20

var reg=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/;

至少包含数字跟字母,可以有字符

var reg=/(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/;

手机号

var reg=/^1[3456789]\d{9}$/;

固话或手机:

 var reg =/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;

邮箱

 var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

微信号

var reg= /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/;

公司组织机构代码

reg= /^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/; 

公司组织机构代码

reg= /^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/; 

正数(最多两位小数)

reg = /^(([1-9]\d*(\.\d{1,2})?)|(0\.\d{1,2}))$/;

域名

reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?/;

身份证号(15位、18位数字):

reg = /^\d{15}|\d{18}$/;

短身份证号码(数字、字母x结尾):

reg = /^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$/;

日期格式:

reg = /^\d{4}-\d{1,2}-\d{1,2}/;

一年的12个月(01~09和1~12):

reg = /^(0?[1-9]|1[0-2])$/;

一个月的31天(01~09和1~31):

reg = /^((0?[1-9])|((1|2)[0-9])|30|31)$/;

腾讯QQ号 (腾讯QQ号从10000开始)

reg = /[1-9][0-9]{4,}/;

中国邮政编码

reg = /[1-9]\d{5}(?!\d)/;

IP地址:

reg = /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/;
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Element表单验证是什么? Vue Element表单验证是一种基于Vue.js和Element组件库的表单验证方式,通过使用Vue提供的数据驱动的方式,实现实时检测表单输入数据的合法性,并在输入无效时提示错误信息。Vue Element表单验证能够有效地防止用户输入不合法数据,提高应用程序的数据质量。 Vue Element表单验证的特点: 1. 数据驱动:Vue利用双向绑定机制,保证了错误信息和表单输入数据的实时更新。 2. 灵活:可以选择自定义验证规则或使用Element库提供的验证方法。 3. 原子性:每个表单项的验证都是独立的,互不干扰。 4. 可扩展:可以通过自定义指令和插件来扩展验证功能。 Vue Element表单验证的实现方式: 1. 在模板中使用el-form组件包裹表单项,通过设置rules属性指定验证规则。 2. 在data中定义表单数据,通过v-model指令绑定输入框值。 3. 在methods中定义提交表单方法,通过this.$refs.form.validate()方法进行表单验证。 4. 根据验证结果来决定是否提交表单数据。 Vue Element表单验证的基本规则: 1. required:必填项。 2. min/max:最小值/最大值。 3. pattern:正则表达式。 4. validator:自定义验证函数。 需要注意的是,使用Element的表单验证规则时,需要在el-form-item组件中使用prop属性指定绑定的数据项。 Vue Element表单验证的优缺点: 优点: 1. 数据和视图之间绑定紧密,实时更新错误信息和表单数据。 2. 可以选择自定义验证规则或使用Element提供的验证类,具有灵活性。 3. 可以有效预防用户输入不合法数据,提高数据质量。 4. 可扩展性强,可以通过自定义指令和插件来扩展验证功能。 缺点: 1. 对于复杂的表单结构,需要编写大量的验证规则。 2. 使用Element库自带的验证规则时,需要掌握Element库的使用方法。 3. 自定义验证规则时需要了解正则表达式的使用,对于一些开发者来说可能存在一定的难度。 总结: Vue Element表单验证是一种非常方便使用的表单验证方式,能够有效地预防用户输入不合法数据,提高应用程序的数据质量。同时,Vue Element表单验证也具有灵活性和可扩展性,可以根据具体业务需求自定义验证规则或使用Element提供的验证类,实现更加精细的验证效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值