【Vue】iview 表单验证总结

1.为需要校验的表单添加 form 标签

<!--注意: ref/rules/model/prop等属性是必须的-->
<Form res="foemRef" :rules="formRules" :model="formData" v-if="liveNode">
  <Row>
    <!--正常校验-->
    <Col>
      <FormItem prop="name">
          <Input v-model="formData.name"></Input>
      </FormItem>
    </Col>
    <!--动态校验-->
    <Col v-if="flag">
      <FormItem prop="age">
          <Input v-model="formData.age"></Input>
      </FormItem>
    </Col>
    <!--异步校验-->
    <Col>
      <FormItem prop="asyName">
          <Input v-model="formData.asyName"></Input>
      </FormItem>
    </Col>
  </Row>
</Form>

2.添加校验规则

formRules: {
  name: [
    {required: true, message: "必输项不能为空", trigger: 'blur'},
    {validator:(rule, value, cb)=>{lenValid(value, 30, cb)}, trigger: 'blur'}
  ],
  age:[], // 注意因为age是根据条件判断是否必输，先留个坑
  asyName: [ // 异步校验，使用change触发，即使不改变输入数据也会在提交数据的时候自动校验一次
    {validator:(rule, value, cb)=>{asyValid(value, cb)}, trigger: 'change'}
  ]
}

3.校验方法

// 校验输入的字符长度
function lenValid(str, num, cb){
  if(str){
    let len = getLen(str)
    if(len > num){
        return cb(new Error('Too Long...'))
    }
  }
  cb()
}

// 获取字符长度
function getLen(str){
  let len = 0
  if(str){
    str = str + '' // to string
    for(let i=0; i<str.length; i++){
      let c = str.charCodeAt(i)
      if((c >= 0x0001 && c <= 0x007e) || (0xff60 < = c && c <= 0xff9f)){
        len++ // 单字节
      }else{
        len += 3 // 汉字
      }
    }
  }
  return len
}

4.动态添加校验规则

有时候需要动态切换一个输入框，比如：上面的 age 字段，显示的时候是必输项，隐藏的时候是非必输的，这个时候需要动态的修改校验规则

this.liveNode = flase // 先抹去Form，等校验规则修改后在重新渲染
if (this.flag) {
  this.formRules.age.unShift({ required: true, message: '必输项' })
} else {
  if (this.formRules.age.length > 0) {
    this.formRules.age.shift()
  }
}
this.liveNode = true // 重新渲染Form

5.异步校验

有时候输入的内容需要到后台异步校验

// 异步校验 - 成败都要有回调函数，校验失败抛出异常
function asyValid(value, cb) {
  let param = { asyName: value } // 将需要校验的值作为参数
  $http(
    url,
    action,
    param,
    res => {
      cb()
    },
    err => {
      cb(new Error(err.data.message))
    }
  )
}