element+vue表单校验

时间：2025-04-08 07:16:15

说明一下：这一篇是打算慢慢记录积累，所以会不定期更新，如果我的理解有误区请指教

element校验rules

基础知识

  1. 是否必须： required:true || fasle
  2. 根据正则表达式验证： pattern:
  3. 最大长度和最小长度： min和max
  4. 数据转换：transform（value）{return}
  5. 自定义校验功能：validador:fn(rule, value, callback);
  6. 自带验证类型： type:
    string：必须是类型string。This is the default * type.
    number：必须是类型number
    boolean：必须是类型boolean
    method：必须是类型function
    regexp：必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp
    integer：必须是类型number和整数
    float：必须是类型number和浮点数
    array：必须是由…确定的数组。
    object：必须是类型object而不是
    enum：价值必须存在于enum
    date：值必须有效，由确定 Date
    url：必须是类型url
    hex：必须是类型hex
    email：必须是类型email

正则表达式

基础知识

字符 解析
^ 正则式的开始
$ 正则式的结束
[ ] 括号里写需要匹配的字符
{ } 括号里写指定匹配字符的数量
( ) 括号是为了分组
. 匹配除换行符外任意字符
\w 匹配字符或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束

综合应用

element表单校验

1.必填

 rules: {
   name: [{ required: true, message: "请填写应用名称", trigger: "blur" },]
 }

自定义校验（第一种）

export default {
  data(){
    function nameValidate(vm) {
      return (rule, value, callback) => {
        if (/^[0-9a-zA-Z]{1,20}$/.test(vm.form.username)) {
          callback()
        } else {
          callback(new Error('请输入字母或数字长度1-20组成的帐号'))
        }
      }
    }
    return{
      form:{
        name:''
      },
      rules: {
        name: [
          { required: true, message: "请填写账号名称", trigger: "blur" },
          { validator: nameValidate(this), trigger: "blur" },
       ],
      },
    };
  }
}

自定义校验（第二种）

适用二次填写确认密码

export default {
  data(){
    const validatePass = (rule, value, callback) => {
      if (value.length < 9) {
        callback(new Error("请输入9位数或以上的密码"));
      } else {
        if (/^(?=.*?[A-Za-z]+)(?=.*?[0-9]+)(?=.*?[A-Z]).*$/.test(value)) {
          callback();
        }else {
          callback(new Error("密码必须包含数字、字母，字母必须有大小写!"));
        }
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return{
      form:{
        password:'',
        confirmPw:''
      },
     rules: {
       password: [
         { required: true, message: "请填写密码", trigger: "blur" },
         { validator: validatePass, trigger: "blur" },
       ],
       confirmPwd: [
         { required: true, message: "请确认密码", trigger: "blur" },
         { validator: validatePass2, trigger: "blur", required: true },
       ],
     },
    };
  }
}

空格校验（不能输入空格，输入空格将空格替换为空）

 watch: {
    ""(val) {
      this.form.name = val.replace(/\s/g, "");
    }
  },

校验示例

数字加字母组合长度20校验

2022年2月24日

/^(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{1,20}$/

解析：

(?!^\d+$)    //除纯数字

(?!^[a-zA-Z]+$)    //除纯字母

指定内容加数字校验

2022年6月14日

if(!(this.deviceAlias.indexOf(this.deviceName) === 0 && /^[0-9]+\.?[0-9]*$/.test(this.deviceAlias.substr(this.deviceName.length)))){
    this.$message({
        type: "error",
        message: `产品${this.deviceName}的别名格式不正确 格式：产品名称加数字组合`,
    });
    return
}

2022年6月15日

const rexp = new RegExp(`${this.deviceName}\\d+$`)

if(!rexp.test(this.deviceAlias)){
    this.$message({
        type: "error",
        message: `设备${this.deviceName}的别名格式不正确 格式：设备名称加数字组合`,
    });
    return
}
补充知识
什么是new RegExp

1）概述

RegExp 是正则表达式的缩写；当检索某个文本时，可以使用一种模式来描述要检索的内容。就可以使用RegExp这种模式。

2）定义RegExp

RegExp 对象用于存储检索模式。通过 new 关键词来定义 RegExp 对象。如: 以下代码定义了名为 rexp 的 RegExp 对象，其模式是 “x”:

const rexp = new RegExp("x");
RegExp对象的方法
  • test()

test() 方法检索字符串中的指定值。返回值是 true 或 false

const rexp = new RegExp("word123");
if(rexp.test("名称为word123")){
   console.log('word123找到了')
}else{
   console.log('word123没找到')
}

结果：word123找到了

  • exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null

  • compile()

compile() 方法用于改变 RegExp。compile() 既可以改变检索模式，也可以添加或删除第二个参数

校验不能输入中文

2022年9月24日

const validateId = (rule, value, callback) => {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        callback(new Error("不能输入中文"));
      }else {
        callback();
      }
    };

校验版本号

2022年11月10日

function validateVersion (vm) {
      return (rule, value, callback) => {
        if (/^V[0-9]\.([0-9]|[1-9][0-9]?)\.([0-9]|[1-9][0-9]?)$/.test(vm.editionForm.version)) {
          callback()
        } else {
          callback(new Error("请输入正确版本号，例如：V*.***.***"))
        }
      }
    }

限制输入，只允许整数、浮点型数据

2022年12月19日

<div class="mark-item">
  <span>经度</span>
  <el-input placeholder="请输入经度" v-model="lng" maxlength="20" @="onlyNumberLng()"></el-input>
</div>

onlyNumberLng(){
  if (this.lng!= null) {
    this.lng = this.lng.replace(/[^\d.]/g,""); //先把非数字的都替换掉，除了数字和. 
    this.lng = this.lng.replace(/^\./g,""); //必须保证第一个为数字而不是. 
    this.lng = this.lng.replace(/\.{2,}/g,"."); //保证只有出现一个.而没有多个.
    this.lng = this.lng.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//保证.只出现一次，而不能出现两次以上 
  }
},

验证选择时间大于当前时间

2023年2月1日，可参考： element DateTimePicker组件做时间选择限制

const validateDateTime = (vm) => {
  return (rule, value, callback) => {
    const start = new Date(vm.ruleForm.dateTime).getTime();
    if (start < Date.now()) {
      callback(new Error('定时执行时间需大于当前时间'));
    } else {
      callback();
    }
  }
}

只允许输入数字

2023年2月22日

value = value.replace(/[^\d)]/g, "");

JSON格式校验

2023年2月22日

checkJSON(val){
  if(val){
    try {
      JSON.parse(val);
      return true;
    } catch(e) {
      return false;
    }
  }
},

日期时间格式校验

2023年2月24日

// let date='2023-02-24 11:34:21'
let regex=/^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/;
if(!regex.test(date)){
  date=''
  this.$message.error('日期时间格式不正确')
}

时分秒格式校验

2023年2月24日

 // let val='12:32:43'
 let reg = /^([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d$/;
 if(!reg.test(val)){
   val=''
   this.$message.error('时间格式不正确')
 }

不规则字符转换版本号

2023年7月15日

查找V或v后由.或_分隔的三组数字

getVersion(filename){
   var regex = /[V|v]\d+[.|_]\d+[.|_]\d+/;
   var match = regex.exec(filename);
   if (match) {
     let result = match[0];
     let version=result.replaceAll("_", ".").toUpperCase()
     return version;
   }
 },

IP地址格式校验

2024年5月14日

function checkIPCode (vm) {
  return (rule, value, callback) => {
    if(!value){
      callback(new Error('请输入'))
    }
    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();
    }
  }
}

相关文章