校驗規(guī)則不生效
文件一：
AccountLogin.vue
<template>
<div>
<el-form :model="ruleForm" :rules="rules">
<!-- 每一個表單，加props屬性，才能用來驗證 -->
<!-- 子組件中不能直接使用父組件的數據。應該使用props傳遞父組件到子組件的數據，子組件通過events給父組件發(fā)消息，以此實現父子組件間的通信。 -->
<!-- vue里是單向數據流，如果直接綁定props改變父組件的數據會報錯。 -->
<el-form-item props="username">
<el-input v-model="ruleForm.username" placeholder="請輸入用戶名">
<!-- 卡槽 -->
<i slot="prefix" class="el-icon-user"></i>
</el-input>
</el-form-item>
<el-form-item props="password">
<el-input v-model="ruleForm.password" placeholder="請輸入密碼" show-password>
<i slot="prefix" class="el-icon-lock"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%">登錄</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "AccountLogin",
components: {},
props: {
// ? 接收驗證數據
// 接收了兩個數據，一個是表單對象，一個是驗證對象
ruleForm: {
type: Object,
required: true
},
rules: {
type: Object,
required: true
}
},
data() {
return {}
},
methods: {},
mounted() {},
created() {},
filters: {},
computed: {},
watch: {},
directives: {}
};
</script>
文件二：Login.vue
<template>
<div class="login">
<h1>賬號密碼控件</h1>
<div class="account">
<!-- 調用組件的時候需要傳rule-form、rules -->
<!-- <account-login></account-login> -->
<account-login :rule-form="ruleForm" :rules="rules"></account-login>
<!-- <AccountLogin :rule-form="ruleForm" :rules="rules"></AccountLogin> -->
</div>
</div>
</template>
<script>
export default {
name: "Login",
components: {},
props: {},
data() {
return {
// 驗證規(guī)則寫在父組件是因為規(guī)則可能有很多 不止一種規(guī)則 擴展性較強 寫在內部就寫死了 課程中只是一種常規(guī)驗證 實際開發(fā)中則規(guī)則比較多
ruleForm: {
username: "",
password: "",
},
rules: {
username: [
{
required: true,
message: "用戶名不能為空",
//觸發(fā)方式：失去焦點之后觸發(fā)
trigger: "blur",
},
{
min: 2,
max: 6,
message: "用戶名長度在2-6個字符之間",
trigger: "blur",
},
],
password: [
{
required: true,
message: "密碼不能為空",
trigger: "blur",
},
{
min: 6,
max: 15,
message: "密碼長度在6-15個字符之間",
trigger: "blur",
},
],
},
};
},
};
</script>
<style scoped lang="scss">
.login {
margin-top: 30px;
margin-left: 30px;
}
.account {
width: 500px;
}
</style>
文件三：
global.index.js
//這個文件用來注冊全局組件
import Vue from "vue";
import BackTop from "../components/backTop/BackTop";
import AccountLogin from "../components/account/AccountLogin"
//注冊全局組件,第一個參數為注冊組件的名字，第二個參數為注冊組件的實例
Vue.component('backTop',BackTop)
Vue.component('accountLogin',AccountLogin)
