element-ui-verify使用

　　element-ui-verify是对ElementUI原本的校验封装之后的插件，并不会影响使用ElementUI的原生校验。

使用环境为vue+element-ui+webpack模块环境，首先使用淘宝镜像安装cnpm install -s element-ui-verify，安装之后在main.js中引入并使用

 import elementUIVerify from 'element-ui-verify'

 // 注意使用之前必须要先use elementUI
 Vue.use(elementUIVerify)

main.js使用之后就可以直接在el-form-item标签上使用校验规则了，例如下面代码表示内容大于0的校验：

 <el-form-item label="年龄" prop="age" verify int :gt="0">
       <el-input v-model.number="model.age"></el-input>
 </el-form-item>

默认支持的校验规则

length	校验文本长度
minLength	校验文本最短长度
gt	校验数字要大于某数
gte	校验数字要大于等于某数
lt	校验数字要小于某数
lte	校验数字要小于等于某数
maxDecimalLength	校验数字最大小数位
number	校验是否为数字
int	校验是否为整数
phone	校验是否为手机号（随着号段的增加，未来可能需要更新）
email	校验是否为电子邮件地址
verifyCode	校验是否为6位数字验证码

使用这个插件，verify是必须的，如果想使用原生的elementUI校验规则就不需要写verify。

其他关键字说名

canBeEmpty：可以为空，当不为空时又需要校验；

space：使用该关键字时空格也参加校验；

emptyMessage：空检测错误提示；

errorMessage：自定义校验不通过提示；

 <el-form-item prop="numberProp" verify number error-message="请输入正确的数字"></el-form-item>

alias：复用错误提示，插件默认值："该输入项"，使用这个关键字可以｛alias｝不能为空

例如空检测错误提示模板为：

 {empty: '{alias}不能为空'}

表单内容为：

 <el-form-item prop="unknown" verify></el-form-item>
 <el-form-item alias="姓名" prop="name" verify></el-form-item>
 <el-form-item label="地址" prop="address" verify></el-form-item>

• 当unknown输入框为空时，会提示"该输入项不能为空"（alias值默认为"该输入项"）
• 当姓名输入框为空时，会提示"姓名不能为空"（显式设置了alias值时，提示内容自然会以该值去替换模板)
• 当地址输入框为空时，会提示"地址不能为空"（大部分el-form-item都需要设置一个label项，而label项往往就代表该输入项的alias，因此插件会取该值直接作为alias）

watch：监听其他变量触发自身校验，例如修改密码

 <template>
   <el-form :model="model">
     <el-form-item label="密码" prop="pass1" verify>
       <el-input v-model="model.pass1"></el-input>
     </el-form-item>
     <el-form-item label="确认密码" prop="pass2" :verify="verifyPassword" :watch="model.pass1">
       <el-input v-model="model.pass2"></el-input>
     </el-form-item>
   </el-form>
 </template>
 <script>
 export default{
   data () {
     return {
       model: {
         pass1: '',
         pass2: ''
       }
     }
   },
   methods: {
     verifyPassword (rule, val, callback) {
       if (val !== this.model.pass1) callback(Error('两次输入密码不一致!'))
       else callback()
     }
   }
 }
 </script>

自定义校验规则

开发中如果自带的校验规则满足不了需求，我们通常将在全局自定义校验规则，首先在src目录下新建文件夹，我的文件夹叫verifyRule，文件夹中新建index.js文件，通过模块化导出校验规则。

 export default [{
     rule: {
       name: 'blacklist',
     },
     ruleMethod: () => ({
       validator(rule, val, callback) {
         let windowvue = window.vue;
         windowvue.$http.post('校验接口',{searchKey: val}).then(function(result){
           if(result){
             callback(new Error('错误提示信息));
           }else{
             callback();
           }
         });
       }
     })
   }
 ];

然后在main.js里遍历添加校验规则

 import ElementUIVerify from 'element-ui-verify'
 Vue.use(ElementUIVerify)
 // node中如果包下无法通过package.json找到main会自动读取包下的index.js文件
 import  verifyrules from '@/verifyRule'

 verifyrules.forEach(item => {
   ElementUIVerify.addRule(item.rule, item.ruleMethod);
 })

添加之后就可以在项目中通过‘blacklist‘使用自定义的校验规则。

 <el-form-item label="身份证号" prop="customerCardNO" verify blacklist ></el-form-item>