element-plus表单验证规则rules常用_elementplus rules

一、常用属性介绍

tip：type属性值any

talent:[
{ type: 'talent',talent:['唱','跳','rap','篮球'],message: '不在talent中',trigger: 'blur' }
]

二、常用验证规则

const formModel = ref({
  username: '',       // 用户名称
  password: '',       // 用户密码
  repassword: '',     // 再次输入密码
  habit: [],          // 爱好
  email: '',          // 邮箱
  phone:'',           // 手机号码
  agree: true         // 勾选协议
})
 
const rules = ref({
  // 用户名称
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是 5-10位 的字符', trigger: 'blur' }
  ],
  // 用户密码
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码必须是 6-15位 的非空字符', trigger: 'blur' }
  ],
  // 再次输入密码
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码必须是 6-15位 的非空字符', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        // 判断 value 和 当前 form 中收集的 password 是否一致
        if (value !== formModel.value.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback() // 校验成功
        }
      },
      trigger: 'blur'
    }
  ],
  // 验证多选
  habit:[{type: 'array',required: true,message: '请至少选择一个爱好',trigger: 'change'}],
  //验证邮箱
  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
  // 验证手机号
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  // 勾选协议
  agree: [{
    validator: (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请勾选同意协议！'))
      } else {
        callback();
      }     
    },
    trigger: 'change'
  }
  ]
})

三、常用正则表达式

// 1.是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
 
// 2. 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
 
// 3.邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
 
// 4.正整数
pattern:/^[1-9]\d*$/,
 
// 5.小写字母
pattern:/^[a-z]+$/,
 
// 6.大写字母
pattern:/^[A-Z]+$/,
 
// 7.大小写混合
pattern:/^[A-Za-z]+$/,
 
// 8.多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,
 
// 9.数字加英文，不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
 
// 10.前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,
 
// 11.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
 
// 12.中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,

四、免责声明

1、本博客中的文章摘自网上的众多博客，仅作为自己知识的补充和整理，并分享给其他需要的 coder，不会用于商用；

2、因为很多博客的地址已经记不清楚了，所以不会在这里标明出处；

3、正则表达式生成器：正则表达式在线验证-在线正则表达式校验工具

一个 Vue 3 UI 框架 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/#/zh-CN