1. Toy模板网首页
  2. > Toy博客

Vue中常用的rules校验规则

7月前 作者：你邻座的怪同学 分类：Toy博客 阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue中常用的rules校验规则。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue的rules中自带的校验规则和常用正则表达式校验

rules: {
    //验证非空和长度
    name: [{
        required: true,
        message: "站点名称不能为空",
        trigger: "blur"
        },{
        min: 3, 
        max: 5, 
        message: '长度在 3 到 5 个字符', 
        trigger: 'blur' 
    }],
    //验证数值
    age: [{ 
        type: 'number', 
        message: '年龄必须为数字值',
        trigger: "blur"
    }],
    //验证日期
    birthday:[{ 
        type: 'date', 
        required: true, 
        message: '请选择日期', 
        trigger: 'change' 
    }],
    //验证多选
    habit: [{ 
        type: 'array', 
        required: true, 
        message: '请至少选择一个爱好', 
        trigger: 'change' 
    }],
    //验证邮箱
    email: [{ 
        type: 'email', 
        message: '请输入正确的邮箱地址', 
        trigger: ['blur', 'change'] 
    }],
    // 验证手机号
    telephone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur"
    }],
    // 验证经度 整数部分为0-180小数部分为0到7位
    longitude: [{
        pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
        message: "整数部分为0-180,小数部分为0到7位",
        trigger: "blur"
    }],
    // 验证维度 整数部分为0-90小数部分为0到7位
    latitude: [{
        pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
        message: "整数部分为0-90,小数部分为0到7位",
        trigger: "blur"
    }]          
}

vue的rules中自定义校验规则

<script>
  import { checkParam } from "@/api/system/param.js";

  export default {
    name: "Param",
    data() {
      var validateCode = (rule, value, callback) => {
        if (value === '') {} else {
          if (value !== '') {
            const param = {
              id: this.form.id,
              code: this.form.code
            }
            checkParam(param).then(response => {
              if (!response.data) {
                callback(new Error(response.msg));
              } else {
                callback();
              }
            });
          }
        }
      };
      return {
        // 表单校验
        rules: {
          code: [{
            required: true,
            message: "参数编码不能为空",
            trigger: "blur"
          }, {
            max: 50,
            message: '参数编码在 50 个字以内',
            trigger: 'blur'
          }, {
            validator: validateCode,
            trigger: 'blur'
          }]
        }
      };
    },
    created() {

    },
    methods: {

    }
  };
</script>

使用方法

age: [{ validator: this.formValidate.validateIngeterGTZRule, tigger: 'blur' }]

校验工具类

import validator from 'validator'
/* 表单校验规则方法命名以Rule为结尾，方便和一遍的校验区分*/

export default {
  validateNumberRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isNumeric('' + value)) {
      callback(new Error('请输入数字'))
    } else {
      callback()
    }
  },
  validateNumberGTZRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (validator.isNumeric('' + value, [{ no_symbols: false }]) && value > 0) {
      callback()
    } else {
      callback(new Error('请输入正数'))
    }
  },
  validateIntegerRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isInt('' + value)) {
      callback(new Error('请输入整数'))
    } else {
      callback()
    }
  },
  validateIngeterGTZRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isInt('' + value, { gt: 0 })) {
      callback(new Error('请输入正整数'))
    } else {
      callback()
    }
  },
  validateAlphaRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isAlpha(value, 'en-US')) {
      callback(new Error('请输入纯字母'))
    } else {
      callback()
    }
  },

  /*  是否身份证号码*/
  validateIdNoRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的身份证号码'))
      } else {
        callback()
      }
    }
  },
  /*  是否身份证号码,详细规则校验*/
  validateIdNoStrictRule(rule, code, callback) {
    if (code === undefined || code === null || code === '') {
      callback()
    }
    const city = {
      11: '北京',
      12: '天津',
      13: '河北',
      14: '山西',
      15: '内蒙古',
      21: '辽宁',
      22: '吉林',
      23: '黑龙江 ',
      31: '上海',
      32: '江苏',
      33: '浙江',
      34: '安徽',
      35: '福建',
      36: '江西',
      37: '山东',
      41: '河南',
      42: '湖北 ',
      43: '湖南',
      44: '广东',
      45: '广西',
      46: '海南',
      50: '重庆',
      51: '四川',
      52: '贵州',
      53: '云南',
      54: '西藏 ',
      61: '陕西',
      62: '甘肃',
      63: '青海',
      64: '宁夏',
      65: '新疆',
      71: '台湾',
      81: '香港',
      82: '澳门',
      91: '国外 '
    }
    let tip = ''
    let pass = true

    if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
      tip = '身份证号格式错误'
      pass = false
    } else if (!city[code.substr(0, 2)]) {
      tip = '地址编码错误'
      pass = false
    } else {
      // 18位身份证需要验证最后一位校验位
      if (code.length === 18) {
        code = code.split('')
        // ∑(ai×Wi)(mod 11)
        // 加权因子
        const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // 校验位
        const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
        let sum = 0
        let ai = 0
        let wi = 0
        for (let i = 0; i < 17; i++) {
          ai = code[i]
          wi = factor[i]
          sum += ai * wi
        }
        if (parity[sum % 11] !== code[17]) {
          tip = '校验位错误'
          pass = false
        }
      }
    }
    if (!pass) {
      callback(new Error(tip))
    } else {
      callback()
    }
    // if (!pass) alert(tip)
    // return pass
  },

  validateURLRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isURL(value)) {
      callback(new Error('请输入正确的网址'))
    } else {
      callback()
    }
  },
  /*  是否邮箱*/
  validateEMailRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if (!reg.test(value)) {
        callback(new Error('请输入正确的邮箱地址'))
      } else {
        callback()
      }
    }
  },
  /*  是否手机号码*/
  validateMobileRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的电话号码'))
      } else {
        callback()
      }
    }
  },
  /*  是否手机号码或者固话*/
  validateTelOrMobileRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的电话号码或者固话号码'))
      } else {
        callback()
      }
    }
  },
  /*  是否固话*/
  validateTelphoneRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /0\d{2}-\d{7,8}/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'))
      } else {
        callback()
      }
    }
  },

  /*  是否合法IP地址*/
  validateIPRule(rule, value, callback) {
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的IP地址'))
      } else {
        callback()
      }
    }
  }
}

文章来源地址https://www.toymoban.com/news/detail-774850.html

到了这里，关于Vue中常用的rules校验规则的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change

    vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 route和router的写法 setup的两种用法 rules中校验之blur和change 1、写法一 index.vue 2、写法二完整版 index.vue 2、校验文件 srcutilsvalidate.ts

    2024年02月05日
    浏览(29)
  • vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验

    vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验

    一、问题描述 这里由一个动态切换规则校验引发的一些问题，整理了下，如下文所示。 这里有个需求就是，动态切换radio，对input输入框校验，界面如下 在网上找了一圈，用了第一种方法来解决，动态添加验证规则，方法如下 通过if判断platformType是否等于2，然后添加规则，

    2023年04月19日
    浏览(29)

  • Web 前端常用正则校验规则

    作为 Web 前端开发，常用的正则校验规则有很多。下面是一些常见的示例： 手机号码的正则表达式可以根据不同国家和地区的手机号码格式进行调整。以下是中国大陆的手机号码正则表达式： 在这个示例中，正则表达式 ^1[3456789]d{9}$ 表示： ^ 表示匹配字符串的开头。 1 表示

    2024年02月06日
    浏览(30)

  • vue+element多层表单校验prop和rules

    核心点：外层循环是item和index，内层循环是item2和index2 如果都是定义的同一个属性名 外层循环得写 :prop=\\\"\\\'block.\\\'+index+\\\'.numerical\\\'\\\" 同理内层循环就得写 :prop=\\\"\\\'objectSpecs.\\\'+ index2 + \\\'.numerical\\\'\\\" 校验函数方法 :rules=\\\"getRules(item2, item2.name)\\\"

    2024年02月13日
    浏览(24)
  • vue表单及遍历表单校验rules以及validator校验器的使用

    vue表单及遍历表单校验rules以及validator校验器的使用

    为防止用户犯错，尽可能更早地发现并纠正错误。 Element中Form （表单）组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 注意：prop对应表单域 model 字段，使用 validate方法时，该属性是必填的。 目

    2024年02月08日
    浏览(29)
  • Vue + element-ui form rules 校验特殊格式数据（嵌套校验）

    Vue + element-ui form rules 校验特殊格式数据（嵌套校验）

     问题描述： ①     需要多层数据嵌套 表单验证失效 ②     表单验证事件  prop 匹配不到数据，value值undefined 。   首先 在页面有一个新增功能  如下图 ： 泛化答案数据格式与正常表单验证数据格式不同 （如图）：     对象内嵌套 多层嵌套后 校验数组内的值  表单内

    2024年02月08日
    浏览(30)

  • Vue中form表单校验rules的问题（对象数组过滤新对象数组 ，对象校验，数组校验，）

    const data = reactive({ form: { js //往数组中添加这八个相机配置参数 for(var i=0;i8;i++){ const clonedLightObject1 = { …data.form.lightObject1 }; clonedLightObject1.productNameId=pid clonedLightObject1.cameraType=i clonedLightObject1.shootingNumber=1 页面

    2024年02月08日
    浏览(36)

  • vue el-form-item :rules动态校验实现

    1.form表单中 2.data中 3.提交前触发校验

    2024年02月08日
    浏览(30)
  • vue自定义rules，对input表单输入框校验重复值

    vue自定义rules，对input表单输入框校验重复值

    对input表单输入框检验重复值，如对如下图参数名进行校验重复值  el-form-item添加属性:rules=\\\"rules.paramname\\\" 1.写一个rules 2.Method里面添加如下方法 rule:指的是表单中rules属性 value：指的表单输入框中输入的值 callback:回调函数（再次调用校验函数）

    2024年02月11日
    浏览(31)

  • 常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等

    1.邮箱校验规则 2.邮箱校验规则  3.QQ校验规则 4.身份证号码校验规则   5.微信校验规则 6.电话校验规则  7.银行卡号校验规则  8.数字字母校验规则  9.整数校验规则  10.数字校验规则  11.文本校验规则  12.密码校验规则  最后附上 rules 中的使用方法             

    2024年02月05日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包