框架学习之Element表单验证

感觉element的表单组件验证还挺有意思的

第一步 添加el-form标签

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"></el-form>

  • model 对应绑定的是下面input组的的顶级数据对象，是以自定义属性的形式进行添加
  • status-icon这个是状态的icon，写了这个属性之后，input组做失焦验证的时候，input框最右侧出现成功或者失败的icon状态提示。
  • rules对应的是下面input组做失焦验证的，主要规则数据，是以自定义属性的形式进行添加
  • ref是绑定当前作用域中的ref对应的表单对象，举例
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
 //可以在一个失焦验证中唤起另一个的失焦验证
//重点在这一句  _this.$refs.ruleForm.validateField('userRPwd');
const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'));
  } else {
    if (_this.gores && _this.ruleForm.userRPwd !== '') {
      _this.$refs.ruleForm.validateField('userRPwd');
    }else if (!_this.gores){
      const UPassd = _this.$store.state.userPassword||_this.aesEncrypt('123', 'UPassd');
      if (value !== _this.aesDecrypt(UPassd, 'UPassd')) {
        callback(new Error('请输入正确的密码'));
      }
    }
    callback();
  }
};

 //可以在清除按钮事件中写这样的逻辑
 goReg (formName) {
   this.$refs[formName].resetFields();
   this.gores = true;
 }

 //可以在按钮提交事件中写这样的事件验证
checkReg (formName) {
  let _this = this;
  this.$refs[formName].validate((valid) => {
    if (valid) {
      _this.showSuc('登录成功');
      _this.$store.commit('setUName',_this.aesEncrypt(_this.ruleForm.userName, 'UName'));
      _this.$store.commit('setUPassd',_this.aesEncrypt(_this.ruleForm.userPwd, 'UPassd'));
      _this.$store.commit('checkLogin',false);
    } else {
      _this.showErr('请确认所有输入项都填写完成，或者两次密码输入是否匹配');
    }
  });
}

第二步 写规则rule和数据model

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
data () {
  let _this = this;
  const validateName = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请输入用户名'));
    } else {

      const UName = _this.$store.state.userName||_this.aesEncrypt('123', 'UName');

      if (!_this.gores && value !== _this.aesDecrypt(UName, 'UName')) {
        callback(new Error('请输入正确注册的用户名'));
      }
      callback();
    }
  };

  const validatePass = (rule, value, callback) => {
    if (!value) {
      callback(new Error('请输入密码'));
    } else {
      if (_this.gores && _this.ruleForm.userRPwd !== '') {
        _this.$refs.ruleForm.validateField('userRPwd');
      }else if (!_this.gores){
        const UPassd = _this.$store.state.userPassword||_this.aesEncrypt('123', 'UPassd');
        if (value !== _this.aesDecrypt(UPassd, 'UPassd')) {
          callback(new Error('请输入正确的密码'));
        }
      }
      callback();
    }
  };

  const validatePass2 = (rule, value, callback) => {
    if(_this.gores){
      if (!value) {
        callback(new Error('请输入确认输入密码'));
      } else if (value !== _this.ruleForm.userPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }else{
      callback();
    }

  };
  return {
    ruleForm:{
      userName: '',
      userPwd: '',
      userRPwd: ''
    },
    gores: false,
    rules: {
      userName: [
        { validator: validateName, trigger: 'blur' }
      ],
      userPwd: [
        { validator: validatePass, trigger: 'blur' }
      ],
      userRPwd: [
        { validator: validatePass2, trigger: 'blur' }
      ]
    }
  };
},

第三步 与页面元素进行绑定

请注意每个el-form-item中的prop属性，这个是和检测规则进行紧密相连的，是对应rules的属性，请注意一定要一一对应呀。

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
<el-row type="flex" justify="center">
  <el-col :xs="24" :sm="8" class="loginBox">

    <div class="text-center">
      <i class="el-icon-menu loginIcon" alt="用户登录" v-if="!gores"></i>
      <i class="el-icon-date loginIcon" alt="用户注册" v-if="gores"></i>
    </div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">

      <el-col :span="24" class="n-p-l-r">
        <el-form-item class="h1" prop="userName">
          <el-input placeholder="请输入用户名" v-model="ruleForm.userName">
            <template slot="prepend"><i class="el-icon-edit"></i></template>
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24" class="n-p-l-r">
        <el-form-item class="h1" prop="userPwd">
          <el-input placeholder="请输入密码" v-model="ruleForm.userPwd" type="password">
            <template slot="prepend"><i class="el-icon-edit-outline"></i></template>
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24" class="n-p-l-r" v-show="gores">
        <el-form-item class="h1" prop="userRPwd">
          <el-input placeholder="请再次确认输入密码" v-model="ruleForm.userRPwd" type="password">
            <template slot="prepend"><i class="el-icon-edit-outline"></i></template>
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="!gores" class="n-p-l-r">
        <el-form-item>
          <el-button type="primary" plain @click="checkLogin('ruleForm')" class="long">登陆账户</el-button>
        </el-form-item>
      </el-col>

      <el-col :xs="24" :sm="10" :offset="14" v-if="!gores" class="n-p-l-r">
        <el-form-item>
          <el-button plain @click="goReg('ruleForm')" class="long">用户注册</el-button>
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="gores" class="n-p-l-r">
        <el-form-item>
          <el-button type="primary" plain @click="checkReg('ruleForm')" class="long">注册账户</el-button>
        </el-form-item>
      </el-col>

      <el-col :xs="24" :sm="10" :offset="14" v-if="gores" class="n-p-l-r">
        <el-form-item  v-if="gores">
          <el-button plain @click="goLogin('ruleForm')" class="long">已有帐号去登陆</el-button>
        </el-form-item>
      </el-col>

    </el-form>
  </el-col>

</el-row>

第四步 效果预览

登录效果预览

图片

注册效果预览

图片

放上完整项目代码

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<template>
  <transition name="fade">
    <div>
      <el-row type="flex" justify="center">
        <el-col :xs="24" :sm="8" class="loginBox">

          <div class="text-center">
            <i class="el-icon-menu loginIcon" alt="用户登录" v-if="!gores"></i>
            <i class="el-icon-date loginIcon" alt="用户注册" v-if="gores"></i>
          </div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">

            <el-col :span="24" class="n-p-l-r">
              <el-form-item class="h1" prop="userName">
                <el-input placeholder="请输入用户名" v-model="ruleForm.userName">
                  <template slot="prepend"><i class="el-icon-edit"></i></template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24" class="n-p-l-r">
              <el-form-item class="h1" prop="userPwd">
                <el-input placeholder="请输入密码" v-model="ruleForm.userPwd" type="password">
                  <template slot="prepend"><i class="el-icon-edit-outline"></i></template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24" class="n-p-l-r" v-show="gores">
              <el-form-item class="h1" prop="userRPwd">
                <el-input placeholder="请再次确认输入密码" v-model="ruleForm.userRPwd" type="password">
                  <template slot="prepend"><i class="el-icon-edit-outline"></i></template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="!gores" class="n-p-l-r">
              <el-form-item>
                <el-button type="primary" plain @click="checkLogin('ruleForm')" class="long">登陆账户</el-button>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="10" :offset="14" v-if="!gores" class="n-p-l-r">
              <el-form-item>
                <el-button plain @click="goReg('ruleForm')" class="long">用户注册</el-button>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="gores" class="n-p-l-r">
              <el-form-item>
                <el-button type="primary" plain @click="checkReg('ruleForm')" class="long">注册账户</el-button>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="10" :offset="14" v-if="gores" class="n-p-l-r">
              <el-form-item  v-if="gores">
                <el-button plain @click="goLogin('ruleForm')" class="long">已有帐号去登陆</el-button>
              </el-form-item>
            </el-col>

          </el-form>
        </el-col>

      </el-row>
    </div>

  </transition>
</template>

<script>
import crypto from 'crypto';

export default {
  name: 'Login',
  data () {
    let _this = this;
    const validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {

        const UName = _this.$store.state.userName||_this.aesEncrypt('123', 'UName');

        if (!_this.gores && value !== _this.aesDecrypt(UName, 'UName')) {
          callback(new Error('请输入正确注册的用户名'));
        }
        callback();
      }
    };

    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      } else {
        if (_this.gores && _this.ruleForm.userRPwd !== '') {
          _this.$refs.ruleForm.validateField('userRPwd');
        }else if (!_this.gores){
          const UPassd = _this.$store.state.userPassword||_this.aesEncrypt('123', 'UPassd');
          if (value !== _this.aesDecrypt(UPassd, 'UPassd')) {
            callback(new Error('请输入正确的密码'));
          }
        }
        callback();
      }
    };

    const validatePass2 = (rule, value, callback) => {
      if(_this.gores){
        if (!value) {
          callback(new Error('请输入确认输入密码'));
        } else if (value !== _this.ruleForm.userPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }else{
        callback();
      }

    };
    return {
      ruleForm:{
        userName: '',
        userPwd: '',
        userRPwd: ''
      },
      gores: false,
      rules: {
        userName: [
          { validator: validateName, trigger: 'blur' }
        ],
        userPwd: [
          { validator: validatePass, trigger: 'blur' }
        ],
        userRPwd: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    checkLogin (formName) {
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.showSuc('登录成功');
          _this.$store.commit('setUName',_this.aesEncrypt(_this.ruleForm.userName, 'UName'));
          _this.$store.commit('setUPassd',_this.aesEncrypt(_this.ruleForm.userPwd, 'UPassd'));
          _this.$store.commit('checkLogin',false);
        } else {
          _this.showErr('用户名或者帐号输入错误请确认');
        }
      });

    },
    checkReg (formName) {
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.showSuc('登录成功');
          _this.$store.commit('setUName',_this.aesEncrypt(_this.ruleForm.userName, 'UName'));
          _this.$store.commit('setUPassd',_this.aesEncrypt(_this.ruleForm.userPwd, 'UPassd'));
          _this.$store.commit('checkLogin',false);
        } else {
          _this.showErr('请确认所有输入项都填写完成，或者两次密码输入是否匹配');
        }
      });

    },
    goReg (formName) {
       this.$refs[formName].resetFields();
       this.gores = true;
    },
    goLogin (formName) {
      this.$refs[formName].resetFields();
      this.gores = false;
    },
    aesEncrypt(data, key) {
        const cipher = crypto.createCipher('aes192', key);
        var crypted = cipher.update(data, 'utf8', 'hex');
        crypted += cipher.final('hex');
        return crypted;
    },
    aesDecrypt(encrypted, key) {
        const decipher = crypto.createDecipher('aes192', key);
        var decrypted = decipher.update(encrypted, 'hex', 'utf8');
        decrypted += decipher.final('utf8');
        return decrypted;
    },
    showSuc(msg){
      this.$message({
        showClose: true,
        message: msg,
        type: 'success',
        duration:500
      });
    },
    showErr(msg){
      this.$message({
        showClose: true,
        message: msg,
        type: 'error'
      });
    }

  }
};
</script>

<style lang="scss" scoped>
$normal_shadom:#ddd;//页面默认阴影颜色
$normal_active:#5bc0de;//页面默认主色调
$normal_color:#fff; //页面默认未激活色


.loginBox{
  box-shadow: 0 0 21px 2px $normal_shadom;
  margin-top:8%;
  padding: 3%;
  .loginIcon{
    background: $normal_active;
    color:$normal_color;
    border-radius: 100%;
    padding: 25px;
    font-size: 40px;
    margin-bottom: 30px;
  }
}

@media (max-width:768px){
  .loginBox{
    box-shadow: 0 0 21px 2px $normal_color;
  }
}
</style>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是melon根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

                  jsonContent:
                meta: false
                pages: false
                posts:
                  title: true
                  date: true
                  path: true
                  text: false
                  raw: false
                  content: false
                  slug: false
                  updated: false
                  comments: false
                  link: false
                  permalink: false
                  excerpt: false
                  categories: false
                  tags: true

吴王苑外云<br><br>莫过两三巡<br>