vue3-element-plus表单校验和多选表格table的基本使用

表单校验

<script setup>
import { ref } from "vue";
// 登录的表单数据(绑定到最外层的from标签上)
//里面的每个属性都与element-plus的表单标签进行双向绑定,具体可以看html代码
const loginForm = ref({username: "",password: "",loginpassword: "",
});
// 用户名校验(自定义校验,其中value为输入的数据)
const usernamevalidator = (rule, value, callback) => {const regMobile = /^[\\w-]{4,16}$/;if (regMobile.test(value)) {return callback();}return callback(new Error("请输入4-16位数字或大小写字母或者字符"));
};
// 密码校验(自定义校验,其中value为输入的数据)
const passwordvalidator = (rule, value, callback) => {const regMobile =/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]/;if (regMobile.test(value)) {return callback();}return callback(new Error("请输入数字或大小写字母或者字符任意三项即可"));
};
// 确认密码校验(自定义校验,其中value为输入的数据)
const loginpasswordvalidator = (rule, value, callback) => {if (loginForm.value.password === value) {return callback();}return callback(new Error("两次输入不一致"));
};
// 登录数据的校验规则(下面的每个属性就是针对每个表单元素的校验,在标签的prop属性绑定)
//validator为自定义校验,值为上面的自定义规则
const loginrules = ref({username: [{ required: true, message: "账号不能为空", trigger: "blur" },{ validator: usernamevalidator, trigger: "blur" },],password: [{ required: true, message: "密码不能为空", trigger: "blur" },{ validator: passwordvalidator, trigger: "blur" },],loginpassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" },{ validator: loginpasswordvalidator, trigger: "blur" },],
});
//这个baseForm为获取表单的对象ref值,用于对表单规则是否通过进行校验,baseForm绑定到form标签上,具体可以看下面的html代码
const baseForm = ref(null);
const submitForm = () => {
//对表单元素进行校验baseForm.value.validate((valid) => {if (!valid) {//校验失败console.log("请调整数据后再请求");return false;}// 校验成功console.log("123123", 123123);});
};
</script><template>
<!-- ref绑定到上面的属性,用于校验验证表单是否正确输入,model绑定的是整个表单数据,rules绑定的是最外层的总体的那个规则对象 --><el-formref="baseForm":model="loginForm":rules="loginrules">><!--label为显示的内容,prop为规则对象内的一个属性,v-model与表单数据双向绑定--><el-form-itemlabel="账号"prop="username"><el-input v-model="loginForm.username" /></el-form-item><el-form-itemlabel="密码"prop="password"><el-inputv-model="loginForm.password"type="password"autocomplete="off"/></el-form-item><el-form-itemlabel="确认密码"prop="loginpassword"><el-inputv-model="loginForm.loginpassword"type="password"autocomplete="off"/></el-form-item><el-form-item><el-buttontype="primary"@click="submitForm(ruleFormRef)">注册</el-button><el-button>去登录</el-button></el-form-item></el-form>
</template><style scoped lang="scss"></style>

效果图

多选表格

<script setup>
import { ref, reactive } from "vue";
//需要绑定的数据
const defaultData = reactive({tableData: [{id: "01",name: "测试001",},{id: "02",name: "测试002",},{id: "03",name: "测试003",},{id: "04",name: "测试004",},],
});
// 前面的多选框勾中会触发的事件(val为勾选的数据组成的数组)
const handleSelectionChange = (val) => {console.log("val", val);
};
</script><template><!-- data绑定的是数据,selection-change代表勾选的数据,默认有个参数表示勾选上的数据组成的数组 --><el-table:data="defaultData.tableData"style="width: 100%"@selection-change="handleSelectionChange"><!-- 多选框 --><el-table-columntype="selection"width="55"/><!-- label绑定的是当前的标题, property绑定的是数据里面的某个需要展示的属性--><el-table-columnproperty="name"label="Name"width="120"/><el-table-columnproperty="id"label="Address">111</el-table-column></el-table>
</template><style scoped lang="scss"></style>

效果图