我这个示例是写了一个只允许数字字母下划线的验证规则名字叫做pureString
我这个示例是直接通过vue-cli
安装的项目,然后就仅仅安装了element-ui
- 在
src
下面新建文件夹el-components
- 找到
node_modules\element-ui\packages\form\src\form-item.vue
和label-wrap.vue
复制粘贴到el-components
下面 - 在
el-components
下面新建文件夹async-validator
npm clone https://github.com/yiminghe/async-validator.git
到你自己的电脑中把其中的src中的内容复制到上面的async-validator
下面- 修改文件
form-item.vue
中的import AsyncValidator from 'async-validator';
为import AsyncValidator from './async-validator';
- 打开文件
src\el-components\async-validator\rule\type.js
在pattern
这个常量对象中添加新的属性pureString: /^[\w]*$/在const types
这个常量对象中添加新的type方法
pureString(value) {
return typeof value === 'string' && pattern.pureString.test(value)
}
- 在下面的
custom
常量数组中添加一个'pureString'
- 打开文件
src\el-components\async-validator\messages.js
在types中添加一个键值对pureString: '%s 只能由数字字母下划线组成'
- 打开文件
src\el-components\async-validator\validator\index.js
添加一个键值对pureString: type
- 可能需要去
src\el-components\async-validator\util.js
将大约67行这个代码删除掉
for (let arg = args[i]; i < len; arg = args[++i]) {
str += ` ${arg}`;
}
- 打开文件
main.js
引入
import FormItem from './el-components/form-item'
在
Vue.use(ElementUI);
下面添加一句
Vue.component(FormItem.name,FormItem)
- 在任意表单验证的rules中加上一句
{ type:'pureString'}
,例如
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur'},
{ type:'pureString',fullField:'用户名'}
]
}
- 在el-components下面新建文件transform.js内容是
export default function(value){
if(Object.prototype.toString.call(value)==='[object String]'){
return value.trim()
}
return value
}
- 打开
src\el-components\form-item.vue
引入一下上面的transform.js
然后大约在第201行左右原代码是
if (rules && rules.length > 0) {
rules.forEach(rule => {
delete rule.trigger;
});
}
加上一个循环代码变成
if (rules && rules.length > 0) {
rules.forEach(rule => {
delete rule.trigger;
});
rules.forEach(rule=> {
rule.transform = transform
})
}