vue element

2024-06-26 02:44| 来源: 网络整理| 查看: 265

写了一段时间的vue，前端用了element-ui，经常会用到from表单，总结一下form表单的校验，以及遇到过的问题。

正常添加校验流程，在form表单加rule只想对单个input校验自定义校验（例如用正则校验手机号码、数字、url、中文等）添加动态校验（可以根据需要显示校验或者改变校验规则）遇到校验无效的问题正常添加校验流程，在form表单加rule 在el-form里面添加:rules=“rules”在el-form-item里面添加prop，prop对应:model="form"的form的属性然后在data里面添加属性rules在点击提交的按钮里面validate的校验 ..... data() { return { //在rules属性填写相关字段的校验规则 rules: { username: [ { required: true, message: "必填" }, { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' } ], email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }], } } } methods: { onSubmit() { this.$refs.form.validate((valid) => { if (valid) { //调用接口保存 } else { this.$message.error('请完善表单相关信息！'); return false; } }); }, //或者 onSubmit() { if(!this.checkForm()){ this.$message.error('请完善表单相关信息！'); return; } //调用接口保存 }, // 表单校验 checkForm(){ // 1.校验必填项 let validForm = false; this.$refs.form.validate(valid => {validForm = valid}) if(!validForm){ return false; } //其他的校验 /*if(){ return false; }*/ return true; } } 对单个input校验

有时候并不想在form增加rules校验，只想对单个input增加校验,直接在el-form-item里面加rules

【本文地址】

公司简介

联系我们