element Plus+js+vue3的表单验证

陇右浪子

已于 2024-10-02 03:12:15 修改

阅读量245

点赞数 1

文章标签： javascript 前端 vue.js

于 2024-10-02 03:05:34 首次发布

本文链接：https://blog.csdn.net/weixin_45998693/article/details/142677146

版权

小demo示例：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item prop="username" label="姓名:">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item prop="idCard" label="证件号码:">
      <el-input type="password" v-model="form.idCard"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
	  <el-button type="primary" @click="resetForm">取消</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { ref } from 'vue';
const form = ref({
  username: '',
  idCard: ''
});
const rules = {
  username: [
	{ required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  idCard: [
	{ required: true, message: '请输入证件号码'},
	{
		pattern: /(^[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}$)/,
		message: '请输入正确格式！',
		trigger: 'blur'
	}
  ]
};
const formRef = ref(null);
const submitForm = () => {
  formRef.value.validate((valid) => {
	if (valid) {
		 console.log('submit!')
	} else {
	  return false;
	}
  });
}
const resetForm = () => {
	formRef.value.resetFields()
}
</script>