vue 表单自定义校验方法

最新推荐文章于 2024-09-02 15:22:41 发布

System.out.print

最新推荐文章于 2024-09-02 15:22:41 发布

阅读量2.9k

点赞数 1

分类专栏： vue 文章标签： vue 自定义校验校验前端

本文链接：https://blog.csdn.net/weixin_40841731/article/details/83347254

版权

vue 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

所用组件：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