element-ui中备注的正则没提示解决方案

0.00478

已于 2022-11-21 23:54:21 修改

阅读量698

点赞数

分类专栏：前端小功能文章标签：前端 javascript 开发语言正则表达式

于 2022-11-21 23:37:17 首次发布

本文链接：https://blog.csdn.net/qq_51586463/article/details/127974223

版权

前端小功能专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表单正则（主要是备注的提示）

element-ui上的备注不能进行正则提示，可以用这种方法

       <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-suffix="：">
          <el-form-item label="名称" prop="ruleCode">
            <el-input v-model="form.ruleCode" placeholder="请输入名称" :disabled="ruleCodeDisabled" />
          </el-form-item>
          <el-form-item label="序号" prop="ruleName">
            <el-input v-model="form.ruleName" placeholder="请输入序号" />
          </el-form-item>
          <el-form-item label="数值" prop="ruleValue">
            <el-input v-model="form.ruleValue" placeholder="请输入数值" />
          </el-form-item>
          <el-form-item label="备注" class="ellipsis-1" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入规则备注" maxlength="250"/>
            <span style="float:right;color:#999;">{{remnant}}/250</span>
          </el-form-item>
        </el-form>

data(){
     return {
          form:{
               name:undefined,
               sort:undefined,
               value:undefined,
               remark:undefined
          }，
          rules: {
             ruleName: [
                    { required: true, message: '规则名称不能为空', trigger: 'blur' },
                    { pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{4,6}$/, message: "请输入4~6位中文、英文、数字或者下划线", trigger: 'blur'}
               ],
             ruleCode: [{ required: true, message: '规则编码不能为空', trigger: 'blur' },
                  { pattern: /^\d{4,6}$/, message: "请输入4~6位数字", trigger: 'blur'}
             ],
             ruleValue: [{ required: true, message: '规则顺序不能为空', trigger: 'blur' },
                  { pattern: /^\d{1,200}$/, message: "请输入1~64位数字", trigger: 'blur'}],
        //在写规则这里不能像其他表单正则一样，像我下面注释掉这几行就是千万不能写的，应该写成计算属性
             // remark: [
             //   { required: false, message: '规则顺序不能为空', trigger: 'blur' },
             //   { pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,3}$/, message: "内容长度不能超过500", trigger: 'blur'}
             //   ],
           },
     }
} 
computed: {
    // 备注最大输入文字数量
    remnant() {
      return this.form.remark ? 250 - this.form.remark.length : 250;
    },
  },

最终如右图所示：备注显示总字数，输入字数超过总字数，不能键如
在这里插入图片描述
注：这里的正则参考了另一个博主的，如需要更多的正则表达式请移步至：https://blog.csdn.net/qq_21423689/article/details/79005203，或者vscode下载any-rule插件，如下图：

如有侵权请及时告知！！！