vue+element-ui 在弹出表单中的输入框里怎么边输入边校验出生日期的格式是不是对的，就是在如果边输入输错的情况下，上方会弹出一个小提示：请按照1990.01.15格式填写

vue+element-ui 在弹出表单中的输入框里怎么边输入边校验出生日期的格式是不是对的，就是在如果边输入输错的情况下，上方会弹出一个小提示：请按照1990.01.15格式填写？

img

img

img

element ui form官网有自定义校验规则的例子，还有如果想便输入边验证就把trigger值改为 change就可以了或者 改为 ['change','blur']代表改变和失去焦点都验证

  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7472874
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue element-ui 表单验证 第一次表单验证的结果，在第二次表单验证时仍然存在（需要清除上一次的验证结果）
  • 除此之外, 这篇博客: vue+element-ui表单校验封装公用方法文件中的 于是可以将所有正则都提取出来，做公共文件。挂在Vue的原型上，代码如下： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 在utils文件夹下新建formCheck.js

    // 手机号码验证
const validatePhone = (rule, value, callback) => {
    const patter = new RegExp('^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$')
    if (!patter.test(value)) {
        return callback(new Error('请输入正确格式的手机号！'))
    } else {
        callback() // 必须有此项回调，否则验证会一直不通过
    }
}
// 邮箱的正则
const validateEmail = (rule, value, callback) => {
    const mailbox = new RegExp('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$')
    if (!mailbox.test(value)) {
        return callback(new Error('请输入正确格式的邮箱！'))
    } else {
        callback()
    }
}
// 身份证号
const validateIdCardNo = (rule, value, callback) => {
    const mailbox = new RegExp('^[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}[0-9Xx]$')
    if (!mailbox.test(value)) {
        return callback(new Error('请输入正确格式的身份证号！'))
    } else {
        callback()
    }
}

// 身高
const height = (rule, value, callback) => {
    if (!value) {
        return callback(new Error("请输入身高"));
    }
    const mailbox = new RegExp(/^\+?[1-9]{1}[0-9]{0,2}\d{0,0}$/)
    if (!mailbox.test(value)) {
        return callback(new Error('请输入1~999内整数'))
    } else {
        callback()
    }
}

// 体重
const weight = (rule, value, callback) => {
    if (!value) {
        return callback(new Error("请输入体重"));
    }
    const mailbox = new RegExp(/^(?:0\.(?:[1-9]{1,1}|0[1-9])|[1-9]\d{0,2}(?:\.[0-9]{1,1}|\.0[1-9])?|999.9)$/)
    if (!mailbox.test(value)) {
        return callback(new Error('请输入0.1~999.9内整数或一位小数'))
    } else {
        callback()
    }
}

// 驻地海拔
const checkseaLeave = (rule, value, callback) => {
    if (!value) {
        return callback(new Error("请输入海拔"));
    }
    if (Number(value) <= 4000) {
        const regexp = /^-?[1-9]\d*$|^0$/;
        if (!regexp.test(Number(value))) {
            return callback(new Error("请输入不大于4000的整数"));
        } else {
            callback();
        }
    } else {
        return callback(new Error("请输入不大于4000的整数"));
    }

};


export default {
    // demo 仅供参考
    common: {
        phone: [{
            required: true,
            message: '手机号不能为空'
        }, {
            validator: validatePhone,
            trigger: 'blur'
        }],
        email: [{
            required: true,
            message: '邮箱不能为空'
        },
        {
            validator: validateEmail,
            trigger: 'blur'
        }
        ],
        idCardNo: [{
            required: true,
            message: '身份证号码不能为空'
        },
        {
            validator: validateIdCardNo,
            trigger: 'blur'
        }
        ]
    },
    // 通用课目-有伤病人员
    haveInjuries: {
        birthday: [
            { required: true, message: "请输入出生日期", trigger: "blur" },
        ],
        // 体型
        height: [
            {
                validator: height,
                required: true,
                trigger: "blur",
            },
        ],
        weight: [
            {
                validator: weight,
                required: true,
                trigger: "blur",
            },
        ],
        seaLeave: [
            {
                validator: checkseaLeave,
                required: true,
                trigger: "blur",
            },
        ],
    },
    //通用课目-无伤病人员
    injuries: {
        birthday: [
            { required: true,
             message: "请输入出生日期",
              trigger: "blur" },
        ],
        // 体型
        height: [
            {
                validator: height,
                required: true,
                trigger: "blur",
            },
        ],
        weight: [
            {
                validator: weight,
                required: true,
                trigger: "blur",
            },
        ],
        sealevel: [
            {
                validator: checkseaLeave,
                required: true,
                trigger: "blur",
            },
        ],
    },
}

    这样新增该文件之后，分为主要两块：

    1. const 定义各种正则的检验规则（手机号、邮箱等等）
    2. export default {common：{}，aaa:{}} 第二步骤导出一个大对象，里面各种对应该页面的校验规则。
  • 您还可以看一下 jason老师的vue通用后台管理课程中的 element-ui在网页中的使用小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    对于实时校验用户输入的出生日期格式，可以采用Element UI中的表单验证功能。具体实现步骤如下：

    1. 定义表单验证规则，在Vue组件的data选项中添加如下代码：
    data() {
  return {
    rules: {
      birthDate: [
        { required: true, message: '请输入出生日期', trigger: 'blur' },
        { pattern: /^\d{4}\.\d{2}\.\d{2}$/, message: '出生日期格式应为xxxx.xx.xx', trigger: 'blur' }
      ]
    }
  }
}

    这里的rules对象中定义了一个验证规则，其中birthDate为要验证的表单项的prop属性值，required为必填验证，pattern为正则表达式验证，其中\.表示匹配点号。

    1. 在表单项中添加验证规则：
    <el-form-item label="出生日期" prop="birthDate">
  <el-input v-model="birthDate" placeholder="请输入出生日期"></el-input>
</el-form-item>

    这里的prop属性值应该与验证规则中的字段名一致，这样会自动应用验证规则。另外，为了方便显示错误提示消息，建议添加一个label属性。

    1. 添加提交按钮，在提交按钮的点击事件中手动触发表单验证，如果验证通过则正常提交，否则提示错误：
    <el-button type="primary" @click="handleSubmit">提交</el-button>

...

methods: {
  handleSubmit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 提交表单
      }
    })
  }
}

    这里通过this.$refs.form.validate()方法进行表单验证，如果验证通过，执行提交表单的操作。否则可以通过this.$message.error('出生日期格式不正确，请输入xxxx.xx.xx格式')显示错误提示信息。

    综上，整体代码如下：

    <template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="出生日期" prop="birthDate">
      <el-input v-model="birthDate" placeholder="请输入出生日期"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        birthDate: ''
      },
      rules: {
        birthDate: [
          { required: true, message: '请输入出生日期', trigger: 'blur' },
          { pattern: /^\d{4}\.\d{2}\.\d{2}$/, message: '出生日期格式应为xxxx.xx.xx', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单
        } else {
          this.$message.error('出生日期格式不正确，请输入xxxx.xx.xx格式')
        }
      })
    }
  }
}
</script>