vue如何使用rules对表单字段进行校验

蔚落 2022-05-12 11:54 269阅读 0赞

基于element-ui

1、在代码中，添加属性：rules

<el-form :model="form" :rules="rules" ref="form" label-width="150px"></el-form>
    并且，在<el-form-item>中添加prop属性，对应rules中的规则

![format_png][]

2、新开一个文件夹（validate.js）定义验证规则

![format_png 1][]

3、在页面(index.vue)中引入验证规则定义的文件，并在export default中定义rule规则，使用语法：\{validator:验证方法,trigger:验证触发\}

![format_png 2][]

3、以下是validator.js文件的部分验证方法

/* 是否是公司邮箱*/
    export function isWscnEmail(str) {
      const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
      return reg.test(str.trim());
    }
    
    /* 合法uri*/
    export function validateURL(textval) {
      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.,?'\\+&%$#=~_-]+))*$/;
      return urlregex.test(textval);
    }
    
    // 验证是否整数
    export function isInteger(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入正整数'));
        } else {
          const re = /^[0-9]*[1-9][0-9]*$/;
          const rsCheck = re.test(value);
          if (!rsCheck) {
            callback(new Error('请输入正整数'));
          } else {
            callback();
          }
        }
      }, 1000);
    }
    
    
    // 验证是否是[0-1]的小数
    export function isDecimal(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error('请输入数字'));
        } else {
          if (value < 0 || value > 1) {
            callback(new Error('请输入[0,1]之间的数字'));
          } else {
            callback();
          }
        }
      }, 1000);
    }
    
    // 验证端口是否在[0,65535]之间
    export function isPort(rule, value, callback) {
      if (!value) {
        return callback(new Error('输入不可以为空'));
      }
      setTimeout(() => {
        if (value == '' || typeof(value) == undefined) {
          callback(new Error('请输入端口值'));
        } else {
          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])$/;
          const rsCheck = re.test(value);
          if (!rsCheck) {
            callback(new Error('请输入在[0-65535]之间的端口值'));
          } else {
            callback();
          }
        }
      }, 1000);
    }
    
    /* 小写字母*/
    export function validateLowerCase(str) {
      const reg = /^[a-z]+$/;
      return reg.test(str);
    }

原文地址：[http://www.cnblogs.com/luoxuemei/p/9295506.html][http_www.cnblogs.com_luoxuemei_p_9295506.html]

[format_png]: /images/20220512/deede7eaabc44bd0b70146d4d0b0fbc9.png
[format_png 1]: /images/20220512/32a76e903a24414ebf2901937669570c.png
[format_png 2]: /images/20220512/908337dc80c84ab9976cf5966c9f2ff3.png
[http_www.cnblogs.com_luoxuemei_p_9295506.html]: http://www.cnblogs.com/luoxuemei/p/9295506.html