element 自定义验证

有时候element的表单验证无法满足我们都的需求，我们就需要写自定义验证。

现有如下需求，需要验证某个输入的字段是否含有不位于首尾的“.”字符

实现：

使用element自定义的自定义验证，首先在页面中写入

<el-form  status-icon ref="subform" class="demo-ruleForm" :model="subform"
         :rules="rules"><el-form-item prop='str' label="自定义验证：" status-icon required>
  <el-col :span="16">
    <el-input type="text" v-model="subform.str"></el-input>
  </el-col>
</el-form-item>
</el-form>

// status-icon 是验证结果的显示效果，验证成功会显示绿色，验证失会显示红色
// required   是必填项的标识，加上这个会在输入框前边显示红色*，说明必填

rules: {
  code: [
    {validator: validateCode,trigger: "blur"}
  ],
}

validateCode就是自己定义的规则

data() {  
// 指标code“.”的自定义验证
      var validateCode = (rule, value, callback) => {
        if (value.indexOf(".")==-1) {
          callback(new Error('请输入带有字符 . 的指标CODE'));
        }
        else if(value.indexOf(".")==0||value.indexOf(".")==value.length-1){
          callback(new Error('字符 . 不能位于起始位置和终止位置'));
        }else {
          callback();
        }
      };
}

在data里，return外写自定义验证

其中value.indexOf("."),获得.的位置，如果是-1，说明不存在

callback（new Error()）;里面的是当验证不通过时显示的内容，注意要把else{

callback}写上，不然不显示验证通过的样式。