Form表单
rules格式校验
可以在validator中进行网络请求，实现网络校验
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | const formRules = { userName: [{required: true, message: "用户名不能为空", trigger: 'blur'}, { min: 5, max: 10, message: "长度必须5-10位", trigger: 'blur' }], passWord: [{required: true, message: "密码不能为空", trigger: 'blur'}], reference: [{ validator: referenceValidity, required: true, trigger: "blur", },],}function referenceValidity(rule, value, callback) { console.log('校验推荐人') if (value === "" || value === undefined) { callback(new Error("请输入推荐人姓名")); } else { //请求网络校验推广人 // console.log("输入的推荐人姓名：" + value) // const _url = "xxxxxxxxxxx"; // let param = {}; // param.promotionPecialistName = value; // get(this.$http, _url, param).then(function (response) { // let res = response.data; // if (res.code === "I000000") { // if (res.data.isFlag) { // callback() // } else { // callback(new Error("推荐人不存在")) // } // } else { // callback(new Error("推荐人不存在")) // } // }); callback(new Error("推荐人不存在")) }} |
formRef引用form对象 form表单中关联formRef（引用对象），form（表单内容），formRules（校验规则）
1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 | const formRef = ref()function reqLogin() { console.log("账号信息", form.value) formRef.value.validate((valid) => { console.log("formRef valid = ", valid) if (valid) { setToken() store.commit("setUserInfo", form.value) showToast("登录成功") router.push('/') } })} |
键盘监听
1 2 3 4 5 6 7 8 9 10 11 12 | onMounted(() => { console.log("页面加载") document.addEventListener('keyup', onkeyup)})onBeforeUnmount(() => { document.removeEventListener('keyup', onkeyup)})function onkeyup(e) { if (e.key === 'Enter') { reqLogin() }} |
完整代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import {onBeforeUnmount, onMounted, ref} from "vue";import {Lock, User} from "@element-plus/icons-vue";import {useRouter} from "vue-router";import {setToken} from "../utils/CookieUtil.js";import {showToast} from "../utils/ToastUtil.js";import {useStore} from "vuex";const router = useRouter()const store = useStore()const form = ref({ userName: "", passWord: "", reference: ""})const formRef = ref()const formRules = { userName: [{required: true, message: "用户名不能为空", trigger: 'blur'}, { min: 5, max: 10, message: "长度必须5-10位", trigger: 'blur' }], passWord: [{required: true, message: "密码不能为空", trigger: 'blur'}], reference: [{ validator: referenceValidity, required: true, trigger: "blur", },],}function referenceValidity(rule, value, callback) { console.log('校验推荐人') if (value === "" || value === undefined) { callback(new Error("请输入推荐人姓名")); } else { //请求网络校验推广人 // console.log("输入的推荐人姓名：" + value) // const _url = "xxxxxxxxxxx"; // let param = {}; // param.promotionPecialistName = value; // get(this.$http, _url, param).then(function (response) { // let res = response.data; // if (res.code === "I000000") { // if (res.data.isFlag) { // callback() // } else { // callback(new Error("推荐人不存在")) // } // } else { // callback(new Error("推荐人不存在")) // } // }); callback(new Error("推荐人不存在")) }}function onkeyup(e) { if (e.key === 'Enter') { reqLogin() }}onMounted(() => { console.log("页面加载") document.addEventListener('keyup', onkeyup)})onBeforeUnmount(() => { document.removeEventListener('keyup', onkeyup)})function reqLogin() { console.log("账号信息", form.value) formRef.value.validate((valid) => { console.log("formRef valid = ", valid) if (valid) { setToken() store.commit("setUserInfo", form.value) showToast("登录成功") router.push('/') } })}<div style="height: 100vh;width: 100vw;flex-direction: row"> <div class="flex-col-center" style="width: 70%;height: 100%;background: #213547"> <span style="font-size: 40px;color: white">测试系统登录页面</span> <span style="font-size: 20px;color: white">演示Demo</span> </div> <div class="flex-col-center" style="width: 30%;padding: 100px"> <h2 style="font-size: 20px">欢迎回来</h2> 登录</div> </div>.flex-col-center { display: flex; flex-direction: column; justify-content: center} |
到此这篇关于Vue Form表单的使用，rules格式校验网络校验，键盘按键监听的文章就介绍到这了,更多相关Vue Form表单rules格式内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
