devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue系列之—Element UI 表单自定义效验规则_elementui自定义表单验证规则

作者：菜鸟追梦旅行 | 2024-05-22 08:17:27

赞

踩

elementui自定义表单验证规则

目录

 一、表单效验规则的使用

1、自定义效验规则介绍

2、绑定效验方法

3、添加效验

4、效验判断

5、清除效验规则

二、常见表单效验规则

（一）pattern验证

（二）validator.js文件中常见的验证方法

 一、表单效验规则的使用

1、自定义效验规则介绍

  • 是否必填： required: true  ||   fasle
  • 效验消息提示：message: "提示信息"
  • 效验触发方式：trigger："change"  ||  "blur"
  • 根据正则表达式验证： pattern
  • 最大长度和最小长度： max = 10 和 min = 1
  • 数据转换：transform（value）{return}
  • 自定义校验功能：validador: fn(rule, value, callback)

2、绑定效验方法

  1. 在<el-form>中添加属性   :rule="rules"；
  2. 在<el-form-item>中添加prop属性，将属性值对应写在rules规则中。
  1.  <el-form :model="ruleForm" :rules="rules">
  2.         <el-form-item label="姓名：" prop="name">
  3.           <el-input
  4.             v-model.trim="personList.name"
  5.             placeholder="请输入"
  6.           />
  7.         </el-form-item>
  8. </el-form>

3、添加效验

  • 方法一：直接在index.vue页面中用 pattern 进行正则表达式验证
  1. name: [ 
  2.   { pattern: pattern验证, required: true, message: "提示信息", trigger: "blur" }
  3. ]

案例：

  1. data() {
  2.  
  3.     return {
  4.  
  5.         rules: {
  6.              name: [
  7.              { required: false, message: "请输入姓名", trigger: "blur" },
  8.              { min: 1, max: 10, message: "长度不超过10个字符", trigger: "blur" }
  9.           ],
  10.  
  11.              number: [
  12.  
  13.               { required: true, message: "数字", trigger: "blur" },
  14.  
  15.               { pattern: /^[0-9]+.?[0-9]{1,2}?$/ , message: '金额为数字', trigger: "blur"},
  16.  
  17.             ]
  18.  
  19.    }
  20.   }
  21. }
  1. //表单限制 input 输入框只能输入纯数字
  2. oninput = "value=value.replace(/[^\d]/g,'')" 
  3.  
  4.  
  5. //案例
  6. <el-form-item label="员工号：">
  7.               <el-input
  8.                 v-model.trim="PersonnelData.staffId"
  9.                 oninput="value=value.replace(/[^\d]/g,'')"
  10.                 clearable
  11.                 placeholder="请输入员工号"
  12.               />
  13.  </el-form-item>
  • 方法二 ：直接在index.vue页面中的data里面定义验证方法
  • 使用语法：{validator:验证方法,trigger:验证触发}
  1. data() {
  2.     const validatePass = (rule, value, callback) => {
  3.  
  4.       if (value.length < 3) {
  5.  
  6.         callback(new Error("密码不能小于3位"));
  7.  
  8.       } else {
  9.  
  10.         callback();
  11.  
  12.       }
  13.  
  14.     };
  15.  
  16. return {
  17.  
  18. rules: {
  19.  
  20.   password: [
  21.  
  22.           { required: true, trigger: "blur", validator: validatePass },
  23.  
  24.         ]
  25.  
  26.    }
  27.   }
  28. }

  • 方法三：新开一个文件夹（validate.js）定义所有需要用到的验证规则

  • 然后在页面(index.vue)中引入验证规则定义的文件，并在export default中定义rule规则

  • 使用语法：{validator:验证方法,trigger:验证触发}

4、效验判断

  • 验证设置效验处是否已完成填写，若无，则效验处有提示
  1. handle() {
  2.   this.$refs["admin"].validate((valid) => {
  3.     if(valid){
  4.     .......
  5.      }
  6.    })
  7. }

5、清除效验规则

  1. Close() {
  2.   this.$refs["dateForm"].clearValidate();
  3.   this.dateForm = {}
  4. }

二、常见表单效验规则

（一）pattern验证

  1. 1、是否合法IP地址:
  2. pattern:/^(\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])$/,
  3.  
  4. 2.是否手机号码或者固话
  5. pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
  6.  
  7. 3. 是否身份证号码
  8. pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
  9.  
  10. 4.是否邮箱
  11. pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
  12.  
  13. 5.整数填写
  14. pattern:/^-?[1-9]\d*$/,
  15.  
  16. 6.正整数填写
  17. pattern:/^[1-9]\d*$/,
  18.  
  19. 7.小写字母
  20. pattern:/^[a-z]+$/,
  21.  
  22. 8.大写字母
  23. pattern:/^[A-Z]+$/,
  24.  
  25. 9.大小写混合
  26. pattern:/^[A-Za-z]+$/,
  27.  
  28. 10.多个8位数字格式(yyyyMMdd)并以逗号隔开
  29. pattern:/^\d{8}(\,\d{8})*$/,
  30.  
  31. 11.数字加英文，不包含特殊字符
  32. pattern:/^[a-zA-Z0-9]+$/,
  33.  
  34. 12.前两位是数字后一位是英文
  35. pattern:/^\d{2}[a-zA-Z]+$/,
  36.  
  37. 13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
  38. pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
  39.  
  40. 14.中文校验
  41. pattern:/^[\u0391-\uFFE5A-Za-z]+$/,

（二）validator.js文件中常见的验证方法

  1. 1、是否合法IP地址
  2. export function validateIP(rule, value,callback) {
  3.   if(value==''||value==undefined||value==null){
  4.     callback();
  5.   }else {
  6.     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])$/;
  7.     if ((!reg.test(value)) && value != '') {
  8.       callback(new Error('请输入正确的IP地址'));
  9.     } else {
  10.       callback();
  11.     }
  12.   }
  13. }
  14.  
  15. 2、是否手机号码或者固话
  16. export function validatePhoneTwo(rule, value, callback) {
  17.   const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
  18.   if (value == '' || value == undefined || value == null) {
  19.     callback();
  20.   } else {
  21.     if ((!reg.test(value)) && value != '') {
  22.       callback(new Error('请输入正确的电话号码或者固话号码'));
  23.     } else {
  24.       callback();
  25.     }
  26.   }
  27. }
  28.  
  29. 3、是否固话
  30. export function validateTelphone(rule, value,callback) {
  31.   const reg =/0\d{2,3}-\d{7,8}/;
  32.   if(value==''||value==undefined||value==null){
  33.     callback();
  34.   }else {
  35.     if ((!reg.test(value)) && value != '') {
  36.       callback(new Error('请输入正确的固定电话）'));
  37.     } else {
  38.       callback();
  39.     }
  40.   }
  41. }
  42.  
  43. 4、是否手机号码
  44. export function validatePhone(rule, value,callback) {
  45.   const reg =/^[1][3-9][0-9]{9}$/;
  46.   if(value==''||value==undefined||value==null){
  47.     callback();
  48.   }else {
  49.     if ((!reg.test(value)) && value != '') {
  50.       callback(new Error('请输入正确的电话号码'));
  51.     } else {
  52.       callback();
  53.     }
  54.   }
  55. }
  56. 5、是否身份证号码
  57. export function validateIdNo(rule, value,callback) {
  58.   const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  59.   if(value==''||value==undefined||value==null){
  60.     callback();
  61.   }else {
  62.     if ((!reg.test(value)) && value != '') {
  63.       callback(new Error('请输入正确的身份证号码'));
  64.     } else {
  65.       callback();
  66.     }
  67.   }
  68. }
  69.  
  70. 6、是否邮箱
  71. export function validateEMail(rule, value,callback) {
  72.   const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
  73.   if(value==''||value==undefined||value==null){
  74.     callback();
  75.   }else{
  76.     if (!reg.test(value)){
  77.       callback(new Error('请输入正确的邮箱'));
  78.     } else {
  79.       callback();
  80.     }
  81.   }
  82. }
  83.  
  84. 7、合法url
  85. export function validateURL(url) {
  86.   const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
  87.   return urlregex.test(url);
  88. }
  89.  
  90. 8、验证内容是否包含英文数字以及下划线
  91. export function isPassword(rule, value, callback) {
  92.   const reg =/^[_a-zA-Z0-9]+$/;
  93.   if(value==''||value==undefined||value==null){
  94.     callback();
  95.   } else {
  96.     if (!reg.test(value)){
  97.       callback(new Error('仅由英文字母，数字以及下划线组成'));
  98.     } else {
  99.       callback();
  100.     }
  101.   }
  102. }
  103.  
  104. 9、自动检验数值的范围
  105. export function checkMax20000(rule, value, callback) {
  106.   if (value == '' || value == undefined || value == null) {
  107.     callback();
  108.   } else if (!Number(value)) {
  109.     callback(new Error('请输入[1,20000]之间的数字'));
  110.   } else if (value < 1 || value > 20000) {
  111.     callback(new Error('请输入[1,20000]之间的数字'));
  112.   } else {
  113.     callback();
  114.   }
  115. }
  116.  
  117. 10、验证数字输入框最大数值
  118. export function checkMaxVal(rule, value,callback) {
  119.   if (value < 0 || value > 最大值) {
  120.     callback(new Error('请输入[0,最大值]之间的数字'));
  121.   } else {
  122.     callback();
  123.   }
  124. }
  125.  
  126. 11、验证是否1-99之间
  127. export function isOneToNinetyNine(rule, value, callback) {
  128.   if (!value) {
  129.     return callback(new Error('输入不可以为空'));
  130.   }
  131.   setTimeout(() => {
  132.     if (!Number(value)) {
  133.       callback(new Error('请输入正整数'));
  134.     } else {
  135.       const re = /^[1-9][0-9]{0,1}$/;
  136.       const rsCheck = re.test(value);
  137.       if (!rsCheck) {
  138.         callback(new Error('请输入正整数，值为【1,99】'));
  139.       } else {
  140.         callback();
  141.       }
  142.     }
  143.   }, 0);
  144. }
  145.  
  146. 12、验证是否整数
  147. export function isInteger(rule, value, callback) {
  148.   if (!value) {
  149.     return callback(new Error('输入不可以为空'));
  150.   }
  151.   setTimeout(() => {
  152.     if (!Number(value)) {
  153.       callback(new Error('请输入正整数'));
  154.     } else {
  155.       const re = /^[0-9]*[1-9][0-9]*$/;
  156.       const rsCheck = re.test(value);
  157.       if (!rsCheck) {
  158.         callback(new Error('请输入正整数'));
  159.       } else {
  160.         callback();
  161.       }
  162.     }
  163.   }, 0);
  164. }
  165.  
  166. 13、验证是否整数,非必填
  167. export function isIntegerNotMust(rule, value, callback) {
  168.   if (!value) {
  169.     callback();
  170.   }
  171.   setTimeout(() => {
  172.     if (!Number(value)) {
  173.       callback(new Error('请输入正整数'));
  174.     } else {
  175.       const re = /^[0-9]*[1-9][0-9]*$/;
  176.       const rsCheck = re.test(value);
  177.       if (!rsCheck) {
  178.         callback(new Error('请输入正整数'));
  179.       } else {
  180.         callback();
  181.       }
  182.     }
  183.   }, 1000);
  184. }
  185.  
  186. 14、 验证是否是[0-1]的小数
  187. export function isDecimal(rule, value, callback) {
  188.   if (!value) {
  189.     return callback(new Error('输入不可以为空'));
  190.   }
  191.   setTimeout(() => {
  192.     if (!Number(value)) {
  193.       callback(new Error('请输入[0,1]之间的数字'));
  194.     } else {
  195.       if (value < 0 || value > 1) {
  196.         callback(new Error('请输入[0,1]之间的数字'));
  197.       } else {
  198.         callback();
  199.       }
  200.     }
  201.   }, 100);
  202. }
  203.  
  204. 15、 验证是否是[1-10]的小数,即不可以等于0
  205. export function isBtnOneToTen(rule, value, callback) {
  206.   if (typeof value == 'undefined') {
  207.     return callback(new Error('输入不可以为空'));
  208.   }
  209.   setTimeout(() => {
  210.     if (!Number(value)) {
  211.       callback(new Error('请输入正整数，值为[1,10]'));
  212.     } else {
  213.       if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) {
  214.         callback(new Error('请输入正整数，值为[1,10]'));
  215.       } else {
  216.         callback();
  217.       }
  218.     }
  219.   }, 100);
  220. }
  221.  
  222. 16、验证是否是[1-100]的小数,即不可以等于0
  223. export function isBtnOneToHundred(rule, value, callback) {
  224.   if (!value) {
  225.     return callback(new Error('输入不可以为空'));
  226.   }
  227.   setTimeout(() => {
  228.     if (!Number(value)) {
  229.       callback(new Error('请输入整数，值为[1,100]'));
  230.     } else {
  231.       if (value < 1 || value > 100) {
  232.         callback(new Error('请输入整数，值为[1,100]'));
  233.       } else {
  234.         callback();
  235.       }
  236.     }
  237.   }, 100);
  238. }
  239.  
  240. 17、验证是否是[0-100]的小数
  241. export function isBtnZeroToHundred(rule, value, callback) {
  242.   if (!value) {
  243.     return callback(new Error('输入不可以为空'));
  244.   }
  245.   setTimeout(() => {
  246.     if (!Number(value)) {
  247.       callback(new Error('请输入[1,100]之间的数字'));
  248.     } else {
  249.       if (value < 0 || value > 100) {
  250.         callback(new Error('请输入[1,100]之间的数字'));
  251.       } else {
  252.         callback();
  253.       }
  254.     }
  255.   }, 100);
  256. }
  257.  
  258. 18、验证端口是否在[0,65535]之间
  259. export function isPort(rule, value, callback) {
  260.   if (!value) {
  261.     return callback(new Error('输入不可以为空'));
  262.   }
  263.   setTimeout(() => {
  264.     if (value == '' || typeof(value) == undefined) {
  265.       callback(new Error('请输入端口值'));
  266.     } else {
  267.       const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
  268.       const rsCheck = re.test(value);
  269.       if (!rsCheck) {
  270.         callback(new Error('请输入在[0-65535]之间的端口值'));
  271.       } else {
  272.         callback();
  273.       }
  274.     }
  275.   }, 100);
  276. }
  277.  
  278. 19、验证端口是否在[0,65535]之间，非必填,isMust表示是否必填
  279. export function isCheckPort(rule, value, callback) {
  280.   if (!value) {
  281.     callback();
  282.   }
  283.   setTimeout(() => {
  284.     if (value == '' || typeof(value) == undefined) {
  285.       //callback(new Error('请输入端口值'));
  286.     } else {
  287.       const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
  288.       const rsCheck = re.test(value);
  289.       if (!rsCheck) {
  290.         callback(new Error('请输入在[0-65535]之间的端口值'));
  291.       } else {
  292.         callback();
  293.       }
  294.     }
  295.   }, 100);
  296. }
  297.  
  298. 20、小写字母
  299. export function validateLowerCase(val) {
  300.   const reg = /^[a-z]+$/;
  301.   return reg.test(val);
  302. }
  303.  
  304. 21、两位小数验证
  305. const validateValidity = (rule, value, callback) => {
  306.   if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
  307.     callback(new Error('最多两位小数！！！'));
  308.   } else {
  309.     callback();
  310.   }
  311. };
  312.  
  313. 22、是否大写字母
  314. export function validateUpperCase(val) {
  315.   const reg = /^[A-Z]+$/;
  316.   return reg.test(val);
  317. }
  318.  
  319. 23、是否大小写字母
  320. export function validatAlphabets(val) {
  321.   const reg = /^[A-Za-z]+$/;
  322.   return reg.test(val);
  323. }
  324.  
  325. 24、密码校验
  326. export const validatePsdReg = (rule, value, callback) => {
  327.   if (!value) {
  328.     return callback(new Error('请输入密码'))
  329.   }
  330.   if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
  331.     callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
  332.   } else {
  333.     callback()
  334.   }
  335. }
  336.  
  337. 25、中文校验
  338. export const validateContacts = (rule, value, callback) => {
  339.   if (!value) {
  340.     return callback(new Error('请输入中文'))
  341.   }
  342.   if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
  343.     callback(new Error('不可输入特殊字符'))
  344.   } else {
  345.     callback()
  346.   }
  347. }
  348.  
  349. 26、身份证校验
  350. export const ID = (rule, value, callback) => {
  351.     if (!value) {
  352.       return callback(new Error('身份证不能为空'))
  353.     }
  354.     if (! /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
  355.       callback(new Error('请输入正确的二代身份证号码'))
  356.     } else {
  357.       callback()
  358.     }
  359. }
  360.  
  361. 27、账号校验
  362. export const validateCode = (rule, value, callback) => {
  363.   if (!value) {
  364.     return callback(new Error('请输入账号'))
  365.   }
  366.   if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
  367.     callback(new Error('账号必须为6-20位字母和数字组合'))
  368.   } else {
  369.     callback()
  370.   }
  371. }
  372.  
  373. 28、纯数字校验
  374. export const validateNumber = (rule, value, callback) => {
  375.     let numberReg = /^\d+$|^\d+[.]?\d+$/
  376.     if (value !== '') {
  377.         if (!numberReg.test(value)) {
  378.             callback(new Error('请输入数字'))
  379.         } else {
  380.             callback()
  381.         }
  382.     } else {
  383.         callback(new Error('请输入值'))
  384.     }
  385. }
  386.  
  387. 29、最多一位小数
  388. const onePoint = (rule, value, callback) => {
  389.   if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
  390.     callback(new Error('最多一位小数！！！'));
  391.   } else {
  392.     callback();
  393.   }
  394. };

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/607313
推荐阅读