在输入框实现十六进制颜色的校验规则

fury_123

已于 2024-04-24 14:28:04 修改

阅读量146

点赞数 2

文章标签： vue.js javascript 前端

于 2024-04-24 14:23:16 首次发布

本文链接：https://blog.csdn.net/kuang_nu/article/details/138157971

版权

问：

在输入框实现十六进制颜色的校验规则

回答：

<!-- 日间文字颜色 -->
      <el-form-item prop="ligFontColor" label="日间文字颜色"
        :rules="[
          { required: true, message: '颜色不能为空', trigger: 'blur' },
          { validator: validateColor, trigger: 'blur' } // 使用自定义验证函数
        ]"
      >
        <el-input
          v-if="!currentItem.id"
          v-model.trim="addDataForm.ligFontColor"
          @blur="trimEmail('ligFontColor')"
        ></el-input>
</el-form-item>







// 验证颜色值的自定义验证函数
  validateColor(rule, value, callback) {
    // 颜色正则表达式
    const colorRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
    
    // 检查值是否匹配颜色正则表达式
    if (colorRegex.test(value)) {
      // 如果匹配，通过验证
      callback();
    } else {
      // 如果不匹配，返回错误信息
      callback(new Error('请输入有效的颜色值'));
    }
  },