elementUI 表单验证正则表达式

爱写程序的小高

已于 2022-05-11 10:43:16 修改

阅读量1.9k

点赞数 1

分类专栏： vue 文章标签： elementui vue.js javascript

于 2022-05-10 10:59:29 首次发布

本文链接：https://blog.csdn.net/qq_38801090/article/details/124683339

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在elementUI中表单部分

<el-form ref="basicInfo" :rules="Rules" :model="form" :inline="true" label-width="150" >
    <el-form-item label="用户账号" prop="username" :label-width="formLabelWidth">
        <el-input v-model="form.username"></el-input>
    </el-form-item>
</el-form>

在vue中的Rules规则

data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('用户账号不能为空'));
      } else {
        var chrnum = /^\w{3,20}$/;
        if (!(chrnum.test(value))) {
          callback(new Error('用户名必须由数字、26个英文字母或者下划线组成'));
        }
        callback();
      }
    };
    return {
        Rules: {//pattern: '[^ \x22]+'验证空格
            username: [
              {required: true, pattern: '[^ \x22]+',message: '用户账号不能为空', trigg: 'blur'},
              { validator: validatePass, trigger: 'blur' }
            ],
        }
    }
}

注：常见正则表达式