所用组件：Element UI

直接上代码

<el-form :model="editForm" :rules="editFormRules">
     <el-form-item :label="角色名" prop="roleName">
          <el-input v-model="editForm.roleName"></el-input>
     </el-form-item>
</el-form>

<script>
  export default {
    data () {
        let checkIsNull = (rule, value, callback) => {
             var l =  value.trim();
             if(l==0) {
                 callback(new Error('含有非法字符'))
             } else {
                 callback()
             }

        };
        return {
            editForm: {           
                roleName: '',
            },
            editFormRules: {
                roleName: [
                    { required: true, message: '请输入角色名', trigger: 'blur' },
                    { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' },
                //前两个是自带校验规则，下面这个是自定义checkIsNull为一个方法，当校验时会自动执行此方法。checkIsNull写在data里 return之前
                    { validator: checkIsNull, trigger: 'blur' }
                ] 
            }           
        }
     }
    
  }

结语：本人所有文章都立志写的简单易懂，戳中问题点。 当然了，简单的同时可能忽略了很多细节与详细，如有不足的地方，还请谅解并指出。  如对文章或实现技术上有问题，可联系我：qq: 1226500260     邮箱：654868284@qq.com