vue中elementui的el-input实现中文和英文的正则校验

vue中elementui的el-input实现中文和英文的正则校验

在我们写后台管理的时候难免要自定义一些校验的规则，比如说标题必须是中文的，组件名必须是英文的。而如果这个时候，输入框已经是封装好的，我们该咋样去修改实现呢？
今天小编也是搞了一个下午出来了代码分享给 大家！！仅供参考

页面中代码

  <!-- 菜单标题 -->
        <el-form-item label="菜单标题" prop="title">
          <el-input
            v-model="form.title"
            :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'"
            placeholder="菜单标题"
          />
          <!-- <el-input v-model="form.subsysShow" style="width: 178px;" placeholder="匹配组件内Name字段" /> -->
        </el-form-item>

我们可以看出来 里面的title是在form初始化时候定义好的 ，这个时候需要我们进一步的去加判断

校验中文字段的代码

rules: {
        title: [
          { required: true, message: "请输入中文的标题", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
              if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
                callback(new Error("请输入中文"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur"
          }
        ],
}

校验必须为英文的正则

rule:[
   subsysShow: [
          { required: true, message: "请输入英文的组件名", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              //  校验英文的正则
              if (/[a-zA-z]$/.test(value) == false) {
                callback(new Error("请输入英文"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur"
          }
        ],
]