Giter Site home page Giter Site logo

aweiu / element-ui-verify Goto Github PK

View Code? Open in Web Editor NEW
478.0 15.0 55.0 70 KB

如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧!一款更懂你的校验插件

TypeScript 100.00%
element element-ui elementui element-ui-verification element-ui-validator vue

element-ui-verify's Issues

watch在特定场景下会有问题

大神好:
实际场景如下:
变量A的校验依赖于B
A在B=0的时候可以为空,在B=1的时候不能为空
问题出在以下这段代码,对应版本1.1.4
compnent.js第39行
if (fieldValue === '') {
return [{
validator: (rule, val, callback) => {
if (this.canBeEmpty !== undefined || this.minLength <= 0)
callback();
else
callback(Error(this.emptyMessage || errorMessage.get('empty')));
}
}];
}

当A为空的时候,将B值修改为1,正好命中这段代码逻辑,导致不能调用A的自定义校验方法
能否改成,如果有watch的时候始终保持调用校验

特定条件下数字校验失败(好像是bug)

下面是我的使用方式,当输入数字开头时校验失败,比如“2eee”

<el-form-item label="库存总量" prop="left_amount" verify int >
      <el-input v-model.number="model.left_amount"></el-input>
 </el-form-item>

vue版本:2.5.9
elelmentui版本:2.0.11

引入后报错 ELEMENT is not defined

vue.config.js

module.exports = {
    baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    outputDir: "dist",
    configureWebpack: {
        externals: {
            "element-ui": "ELEMENT"
        }
    }
};

这个安装完成,引入之后报错

image

这个问题怎么解决呢?

能否提供一份编译完的js

就是直接可以在页面应用的js,不需要进行编译的,如

  • <script src="/vendor/js/vue.js"></script>
  • <script src="/vendor/js/axios.js"></script>
  • <script src="/vendor/js/element-2.4.js"></script>
  • <script src="/vendor/js/你的验证的js"></script>

el-select 和 el-input 校验形式不同

需求

后台数据回显不触发校验,当编辑时再触发校验

Vue.use(elementUIVerify, {
  fieldChange: 'clear'
})

这样回显时不触发校验,很ok,但是在编辑时,el-input可以正常触发校验,输入框变为绿色,但是el-select却无法变色,感觉就是没进行校验(切换不同值)。这个一直使用element的痛点,不知这里改如何处理比较好
element-ui-validate

如图片上所示,select已经不会发生任何变化了

打包后js体积暴增

在import element-ui-verify 之前,我的app.js大小为2430kb, 引入之后暴增到4045kb,这个源代码体积并不大,为什么会差距这么大呢,我使用的element-ui版本为2.4.6, vue版本为2.5.16

关于动态表单校验问题

你好,请问下,动态表单校验,输入实时提醒是有的,但是调用this.$refs.form.validate的有为空的,也返回true了,请问知道是什么原因吗

自动补全输入框校验问题

大神好,在校验自动补全输入框的时候,
比如输了个a,选中下拉列表第一项,
如果是鼠标选择点击,因为鼠标已经离开输入框,失去焦点后会把文本框中输入的文本a拿去校验,而不是把选中的那一项拿去校验,
请问下这个有什么解决的方法吗?

alias 未生效

image

// main.js
Vue.use(elementUIVerify, {
  fieldChange: 'clear'
})

// 业务 vue
  el-form-item(label="礼物名称" prop="name" verify)
    el-input(v-model.trim="data.name" maxlength='5')

理想中应该是:「礼物名称不能为空」

请问如何使用maxDecimalLength: 校验数字最大小数位

v-model后加.number时用户输入不了小数点,不加时输入的数字又被识别为字符串,请教一下maxDecimalLength的正确用法应该是怎么用呢?

<el-form-item label="小数两位以内的数字" prop="total" verify :max-decimal-length="2">
        <el-input  v-model.number="model.total"></el-input>
</el-form-item>

关于必填的星号展示

原生的校验框架,必填的情况会自动显示星号,而这个不会,需要人工处理,能否增加这个功能呢

在IE11浏览器,报错:Expected ';'

测试代码如下:
e-v.zip
babel设置如下:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
在IE11下报错:
error

插件的默认校验不通过提示模版

{
   empty: '请补充该项内容',
    ...
}

看了一下好像并没有提供接口让我修改默认校验不通过提示模版。
通常情况下是不需要修改,但是现在有一个问题的就是,空校验是优先级最高的,但是这个提示并不符合我们的需求,这种情况下我应该如何修改?fork一份源码来改吗?亦或者提供一下接口?
谢谢。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.