vue -- 表单验证

vue-cli 的表单验证有很多  这里我用的是element-ui

element-ui 表单验证

element-ui给出的示例中 自定义表单验证的  验证规则函数 写在data之内   return之前  

如果表单验证很多 或者验证规则很长 将要自定义很多函数   页面看起来 冗杂 

当其他页面 用到相同的表单验证  就得重新写/复制 一份   复用性不好  至于有没有其他解决方案  我不知道

我将其放到单独的一个表单验证 js中  export一下   页面直接 import引用即可

直接贴代码

其中html部分

js 部分

独立表单文件中规则的定义：

如上表单验证放在公共文件中  根据情况随用随取   页面也很清晰

附上效果图：