vue表单校验

简介: vue表单校验

1,首先给form表单绑定一下

 <el-form
        :model="form"
        label-width="auto"
        label-position="top"
        ref="ruleForms"
        :rules="rules"
        :size="formSize"
        :close-on-click-modal="false"
      >
const ruleForms = ref(null);
这个 :rules="rules" 就是需要验证的东西

可以定义输入的规则

const rules = reactive({
    name: [
      { required: true, message: '请输入员工姓名', trigger: 'change' },
      { min: 2, max: 7, message: '长度在 2 到 7 个字符' },
    ],
    tel: [
      { required: true, message: '请输入电话号', trigger: 'change' },
      { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    idCard: [
      { required: true, message: '请输入证件号码', tigger: 'change' },
      { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确' },
    ],
    sex: [{ required: true, message: '请选择性别', tigger: 'change' }],
    staffStatus: [{ required: true, message: '请选择员工状态', tigger: 'change' }],
    credit: [{ required: true, tigger: 'change', validator: bankAccountValid }],
    basePay: [{ required: true, message: '请输入岗位工资', tigger: 'change' }],
    agreeEnd: [{ required: true, tigger: 'change', validator: time }],
    agreeNum: [{ required: true, tigger: 'change', validator: timeed }],
    grade: [{ required: true, tigger: 'change', validator: graded }],
    //
    company: [{ required: true, tigger: 'change', validator: gongsi }],
    project: [{ required: true, tigger: 'change', validator: items }],
  });

绑定完成之后rules里的名称要和form表单上的prop相等

 <el-form-item label="姓名" prop="name" class="option">
//prop

有时候一些表单无法验证可以使用自定义规则

const timeed = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('请选择现合同期限'));
    }
    callback();
  };

在rules里这样写:

grade: [{ required: true, tigger: 'change', validator: timed }],
//validator要和自定义的函数名一样

在最后的确认按钮的事件里

ruleForm.value.validate((valid) => {
//ruleForm.value是刚开始定义的为null的响应式变量
console.log(valid)
//valid返回的是布尔值,所有都填写了为true,反之则为false
})


目录
打赏
0
0
0
0
0
分享
相关文章
vue的select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性
650 0
ECS中实现nginx4层7层负载均衡和ALB/NLB原SLB负载均衡
通过本文的介绍,希望您能深入理解并掌握如何在ECS中实现Nginx四层和七层负载均衡,以及如何使用ALB和NLB进行高效的负载均衡配置,以提高系统的性能和可靠性。
507 9
在Vue 3中使用useStorage轻松实现localStorage功能
在Vue 3中使用useStorage轻松实现localStorage功能 VueUse 介绍 VueUse文档:Get Started | VueUse VueUse是基于Vue3的Composition API的实用函数的集合,useStorage是其中的一个函数。我们可以使用useStorage来实现我们的localStorage功能。
vue3报错:runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop “modelVal
vue3报错:runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop “modelVal
6695 1
总结php删除html标签和标签内的内容的方法
经常扒别人网站文章的坑们;我是指那种批量式采集的压根不看内容的;少不了都会用到删除html标签的函数;这里介绍3种不同用途上的方法; $str='这里是p标签这里是a标签'; PHP Copy 1:删除全部或者保留指定html标签php自带的函数strip_tags即可满足要求,使用方法:st...
2430 0
墙裂推荐!Vue3 实现B站页面滚动开启小屏播放功能,超简单!!
墙裂推荐!Vue3 实现B站页面滚动开启小屏播放功能,超简单!!
Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model
Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model
398 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问