在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' }
            ],
        }
    }
}

注：常见正则表达式