const resetFields = () => { // 重置element-plus 的表单 formRef.value?.resetFields() } // 表单验证 const validate = () => { return new Promise((resolve, reject) => { formRef.value?.validate((valid) => { if (valid) { resolve(true) } else { reject(false) } }) }) } const ...
2、validatePass是校验Password密码的,里面ruleFormRef.value.validateField('checkPass')是校验Confirm确认密码的,适用的业务场景是,在密码修改完成后,重新校验确认密码与密码是否符合校验规则,比如是否一致3、rules可以不是响应式,有没有必要看具体业务 有用1 回复 撰写回答 你尚未登录,登录后可以 和开发者交流问题的...
ERROR formEl.validate is not a function TypeError: formEl.validate is not a function at Proxy.submitForm (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/basic/component.vue?
在Vue 3中使用Element Plus进行表单校验,你可以按照以下步骤进行: 1. 引入Element-Plus的表单组件及校验规则 首先,确保你已经安装了Element Plus,并在你的Vue项目中引入了它。你需要在你的Vue组件中引入相关的Element Plus组件和样式。 javascript import { ElForm, ElFormItem, ElInput, ElButton } from 'elemen...
基于element-ui 1、在代码中,添加属性::rule AI检测代码解析 <el-form :model="form" :rules="rules" ref="form" label-width="150px"></el-form> 并且,在<el-form-item>中添加prop属性,对应rules中的规则 1. 2. 2、新开一个文件夹(validate.js)定义验证规则 ...
但是不可避免的,需要趟一些雷,比方说element-plus的表单验证功能。由于setup里取消了this获取实例,就突然变得不知所措。以下是我填坑的一些经验。 先看element-plus官方文档中的验证写法。 methods: { submitForm(formName) {this.$refs[formName].validate((valid) =>{if(valid) { ...
{validator: validatePass,trigger:'blur'} ] })// 是否登录成功constsuccessMode = ref<boolean>(false)// 重置表单constresetForm= () => {// 笨办法这么写:// loginForm.value.email = ''// loginForm.value.pass = ''// 明眼人这么写:constform =unref(loginFormRef) ...
vue3+element-plus表单验证以及提交 1.定义验证规则包括用户名、密码以及确认密码 const validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('确认密码不能为空!')); } else if (value !== userForm.password) {...
import {ElMessage} from 'element-plus'; export default { setup() { const route = useRoute(); const datadialog = ref(false) // 新增弹窗 const upload = ref(""); //上传 const ruleFormRef = ref(null); //表单 let formSize = 'default'; ...
export function validateUsername(rule: any, value: any, callback: any, isEdit: boolean) { const flag = new RegExp(/^([a-z\d]+?)$/).test(value); if (!flag) { callback(new Error('用户名支持小写英文、数字')); } if (isEdit) { return callback(); } //根据用户名称进行查询接口...