element ui表单验证(用户名密码手机号邮箱)

<el-form :rule=“rules”

data->return 里加如下代码

  // 创建验证规则
      rules: {
        // 用户名验证
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 8,
            message: "长度在 2 到 8 个字符",
            trigger: "blur",
          },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "姓名不支持特殊字符",
            trigger: "blur",
          },
        ],
        
        // 手机号码验证
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          // 这个只能验证手机号
          // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入正确手机号",
            trigger: "blur",
          },
        ],
        // 邮箱验证
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern:
              /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g,
            message: "请输入正确的邮箱,以@qq.com结尾",
            trigger: "blur",
          },
        ],
        // 密码验证
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, message: '密码最少6位数哦', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
              console.log(passwordreg.test(value))
              if (!passwordreg.test(value)) {
                callback(
                  new Error(
                    '密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'
                  )
                )
              } else {
                callback()
              }
            }
          }
        ],
        // 下拉框验证
        is_active: [
          { type: 'array', required: true, trigger: 'change', message: '状态不能为空' }
        ],
      },