vue+element表单内容选填和必填

Vue表单内容选填，若填写，则必须按照既定的格式

1. 动态绑定rules，若dataForm.mobile为空，则不必填，反之，必填且遵循填写规则

<el-form-item label="手机号" prop="mobile" :rules="dataForm.mobile? dataRule.mobile:[{required: false}]">
 	<el-input v-model="dataForm.mobile" placeholder="请输入11位手机号" ></el-input>
</el-form-item>

<el-form-item label="身份证号" prop="identity" :rules="dataForm.identity? dataRule.identity:[{required: false}]">
    <el-input v-model="dataForm.identity" placeholder="身份证号"></el-input>
</el-form-item>

2. dataForm.mobile等相关数据

data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        name: '',
        mobile:'',
        identity: '',
        },
    }
}

3. 对数据格式的限制

  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        mobile: [
            { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if (value.trim() === '') {
                // callback(new Error('请输入手机号码'))
              } else if (!(/^1[3456789]\d{9}$/.test(value))) {
                callback(new Error('您输入手机号码不正确'))
              } else {
                  callback()
                }
            },
              trigger: 'change'
          }
        ],
        identity: [
          { required: true, message: "请输入身份证号", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if (value.trim() === '') {
                // callback(new Error('请输入手机号码'))
              } else if (!(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(value))) {
                callback(new Error('您输入身份证号不正确'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  }

4. 若设置表单必填，把表单标签内的绑定rules的内容删去即可

效果如图：