element-ui表单验证总结

element-ui的表单验证包括三个元素

rules：表示验证的规则
prop：某个字段所在的位置
v-model：某个字段填写的值

一.rules设置的位置

1.在<el-form>中设置全部的rules

<el-form :model="dataForm" ref="dataForm1" label-width="150px" :rules="rules">

2.在<el-form-item>中设置单独的rules

<el-form-item 
  label="消息" 
  :rules="[ { required: true, message: '消息不能为空', trigger: 'blur' },
   { validator: JSONStringCheck, trigger: 'blur' }]" 
  :prop="message" 
>
</el-form-item>

二.rules的值

1.必填设置，required

2.自己写逻辑或正则验证

(1).写方法验证

a.在<el-form-item>中引入方法（验证是否为JSON格式）

<el-form-item
    :label="消息"
    :rules="[
        { required: true, message: '消息不能为空', trigger: 'blur' },
        { validator: JSONStringCheck, trigger: 'blur' }
    ]"
    :prop="message"
>
    <el-input v-model="dataForm.message" type="textarea" :rows="5"></el-input>
</el-form-item>

methods: {
      JSONStringCheck(rule, value, callback) {
        if (!this.isJson(value)) {
          callback(new Error("请输入正确的json格式"));
        } else {
          callback();
        }
      },
      isJson(data) {
        if (typeof data === 'string') {
          try {
            var obj = JSON.parse(data)
            if (typeof obj === 'object' && obj) {
              return true
            } else {
              return false
            }
          } catch (e) {
            return false
          }
        }
      },
}

b.在data中引入方法（验证是否为大于0的数字）

export default {
    data() {
      const validatorNumber = (rule, value, callback)=> {
        if (typeof value === 'string'&&!value.match(/^[0-9]*$/)) {
          callback(new Error('请输入数字'));
        } else {
          if(value>0) {
            callback();
          } else {
            callback(new Error('请输入大于0的数字'));
          }
        }
      }
      return {
        rules: {
          maxPv: [
            {
              required: true, message: '请输入访问次数上限', trigger: 'blur',
            },
            { validator: validatorNumber },
          ],
        },
      };
    },

(2).正则表达式可直接写在rules中

rules: {
    sharePageShareUrl: [
      {
        pattern: /(http|https):\/\/([\w.]+\/?)\S*/,
        message: 'XXX格式有误',
        trigger: 'blur'
      },
      {required: true, message: 'XXX不能为空', trigger: 'blur'}
    ],
  },

3. trigger是触发验证的事件

blur：当输入框<el-input>失去焦点时触发，但下拉框<el-select>不会触发
change：值改变时，通常用于下拉框<el-select>，<el-input>输入框也会触发

4. 输入值的类型type

字符串：设置type:string，默认
数字：利用监听键盘事件，只能输入数字，<el-input v-model="dataForm1.name" oninput ="value=value.replace(/[^\d.]/g,'')" ></el-input>
时间类型：设置type:date，通常用于时间选择器，<el-date-picker type="date" placeholder="选择日期"></el-date-picker>
数组类型：设置type:array，通常用于多选框，<el-checkbox-group>

三.动态增减表单（数组表单），主要注意对prop的设置

<div class="flex" v-for="(item, index) in dataForm1.messageList">
  <div style="width: 100%;">
    <el-form-item
      :key="`${index}message`"
      :label="`消息JSON ${index + 1}`"
      :rules="[
        { required: true, message: '消息不能为空', trigger: 'blur' },
        { validator: JSONStringCheck, trigger: 'blur' }
      ]"
      :prop="'messageList.'+index+'.message'"
    >
      <el-input v-model="item.message" type="textarea" :rows="5" placeholder=""></el-input>
    </el-form-item>
    <el-form-item
      :key="`${index}immediatelyState`"
      :label="`推送时间 ${index + 1}`"
      :rules="[{ required: true, message: '推送时间不能为空', trigger: 'blur' }]"
      :prop="'messageList.'+index+'.immediatelyState'"
    >
      <el-radio-group v-model="item.immediatelyState">
        <el-radio label="1">立即推送</el-radio>
        <el-radio label="0">延时发送</el-radio>
      </el-radio-group>
      <div v-if="item.immediatelyState === '0'" style="display: inline-block;margin-left: 10px;">
        <el-input v-model="item.hour" style="width:60px;"></el-input>
        时
        <el-input v-model="item.min" style="width:60px;"></el-input>
        分
        <el-input v-model="item.second" style="width:60px;"></el-input>
        秒
      </div>
    </el-form-item>
  </div>
  <div class="del">
    <el-button type="danger" size="small" @click="delMessage(index)">删除</el-button>
  </div>
</div>

这里注意，如果是先获取数据，在进行新增或删除的操作时会出现不在页面中及时动态增减，解决办法：

addMessage() {
  this.dataForm1.messageList.push({message: '', immediatelyState: '', second: 0, hour: 0, min: 0})
  //对整个对象重新赋值
  this.dataForm1 = {...this.dataForm1}
},
delMessage(index) {
  this.dataForm1.messageList.splice(index, 1)
  this.dataForm1 = {...this.dataForm1}
},