各种表单校验

1、单个input输入框（脱离表单的），添加校验

使用到 @blur事件， @blur事件是当元素失去焦点时所触发的事件

用法：

<el-row class="kong jichushux" v-for="(item, index) in jichupro" :key="index">
    <el-col :span="3"><span class="little-title">{{item.name}}</span></el-col>
    <el-col :span="6">
        <span v-if="vVisible">{{item.value}}</span>
        <el-input v-else v-model="item.value" @blur="checkRight(item)"></el-input>
    </el-col>
</el-row>

此处还用到的是行的循环，需要挨个对每行进行校验

checkRight(el) {
    const name = el.name;
    let val = el.value;
    // 根据不同的名字进行不同的校验
    switch (name) {
        case '对象名称':
            if(!val) {
                this.$message.error('请填入内容')
            }
            break;
        case '对象类型':
            if (val && val.substr(0, 5) !== 'value') {
                this.$message.error('固定前缀为value，请按格式填写！')
                val = ''
            }
            break;
        case '对象类型':
            if(!val) {
                this.$message.error('请填入内容')
            }
            break;
        default: 
            break;
    }
}

2、标签限制输入

​​el-input标签限制输入​​

3、vue+element-Ui实现简单的表单必填项验证

通过自带的属性rules来绑定一个验证规则

• 验证规则：
• 是否必须填： required:true|| fasle
• 根据正则表达式验证： pattern
• 最大长度和最小长度： min和max
• 数据转换：transform（value）{return}
• 自定义校验功能：validador:fn(rule, value, callback)

Rules: {
  goodsName: [
    // 还可以通过pattern来加入正则    
    { type: 'date'，required: true, message: '商品名不能为空', trigg: 'blur' },
    // 也可以放入两条验证规则
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ]
}

el-form-item中prop是与rules验证规则对应的名称，验证的就是v-model存在不存在

这样在点击最后的提交按钮的时候，只需触发一个我们的validate就可以了

<el-form ref="basicInfo" :model="Form" :rules="Rules" label-width="120px" class="basicInfo">
  <el-form-item
    label="商品名称："
    prop="goodsName"
  >
    <el-col class="goodsAddSecond-InputWidth">
      <el-input v-model="Form.goodsName"></el-input>
    </el-col>
  </el-form-item>
</el-form>
<el-button @click="submit('basicInfo')"></el-button>

submit(formName) {
  this.$refs[formName].validate(valid => {
    if(valid){
      alert("验证成功")
    }else{
      alert("验证失败")
      return false
    }
  })
}