vue给元素添加校验rules

1.使用validator添加校验规则：

在Elemengplus（Vue 3版本的Element Plus）框架中，给el-dialog中的input框添加日期格式验证，可以使用el-form和el-form-item组件来配合实现，并通过el-input组件的v-model绑定数据，结合el-form的验证规则rules实现。

以下是一个简单的例子，演示如何给日期输入框添加日期格式的验证：

<template>
  <el-dialog title="日期验证对话框" v-model="dialogVisible">
    <el-form :model="form" :rules="rules" ref="dateForm">
      <el-form-item label="日期" prop="date">
        <el-input v-model="form.date" placeholder="请输入日期"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
 
const dialogVisible = ref(false);
const form = ref({
  date: ''
});
 
const validateDate = (rule, value, callback) => {
  // 这里可以添加具体的日期格式验证逻辑
  if (!value) {
    return callback(new Error('日期不能为空'));
  }
  // 假设我们要验证YYYY-MM-DD格式
  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
    return callback(new Error('请输入正确的日期格式YYYY-MM-DD'));
  }
  callback();
};
 
const rules = {
  date: [
    { required: true, message: '请输入日期', trigger: 'blur' },
    { validator: validateDate, trigger: 'blur' }
  ]
};
 
const submitForm = () => {
  form.value.date = form.value.date.trim(); // 去除输入字符串首尾的空格
  const dateForm = ref();
  dateForm.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功');
    } else {
      ElMessage.error('表单验证失败');
      return false;
    }
  });
};
</script>

在这个例子中，我们定义了一个validateDate函数来进行日期格式的验证，它使用正则表达式来检查输入的日期格式是否为YYYY-MM-DD。在rules对象中，我们添加了一个针对date字段的验证规则，并使用validator属性指定了自定义验证函数。在submitForm方法中，我们通过el-form的validate方法来触发验证，并根据验证结果进行相应的操作。

 

2.使用pattern添加验证规则

  <el-dialog v-model="dialogFormVisible" title="Add dialog" width="30%" center>
        <!-- 表单-->
        <el-form ref="userForm" :model="formData" :rules="rules" class="demo-form-inline">
            <el-form-item label="Input infor Name" prop="infoName">
                <el-input v-model="formData.infoName" placeholder="input info name:[yyyy.MM.dd] xxx"/>
            </el-form-item>

        </el-form>

        <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="submitForm(userForm)"> Create </el-button>
              </span>
        </template>
    </el-dialog>




setup() {
            const data = reactive({
                keyWord: {
                    infoName:""
                },
                searchParams: {
                    query:"",
                    pagesize: 20,
                    pagenum: 1
                },
                infoList: [],
                dialogFormVisible: false, //默认create对话框是disable,
                editDialogFormVisible: false,//默认edit对话框是disable,
                formData: {
                    infoName: ""
                },
                rules: {
                    infoName: [
                        {
                            required: true, message: "plz input info name", trigger: ["blur", "change"]
                        },
                        {
                            // pattern:/^\[\d{4}.\d{2}.\d{2}$\]/,
                            pattern:/^\[\d{4}.\d{2}.\d{2}\]/,
                            messsage:"info name style should be: [yyyy.MM.dd] XXX",
                            trigger: ["blur", "change"]

                        },
                    ]
                },
                editFormData: {
                    infoName: ""
                },
                editRules: {
                    infoName: [{
                        required: true, message: "plz input infoname", trigger: ["blur", "change"]
                    }]
                },

            })

trigger: ["blur", "change"]
表示：失去聚焦时 ，值改变时