一篇解决Element ui密码框眼睛图标明文密文，不允许中文输入以及输入的各种校验

最新推荐文章于 2024-06-29 10:05:11 发布

请告诉他

最新推荐文章于 2024-06-29 10:05:11 发布

阅读量3.2k

点赞数 1

分类专栏： vue css Html 文章标签：前端开发 HTML 密码验证表单校验 Vue

本文链接：https://blog.csdn.net/fly19920602/article/details/113384625

版权

vue 同时被 3 个专栏收录

19 篇文章 1 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

Html

14 篇文章 0 订阅

订阅专栏

先上效果，再上代码，后面有说明

代码我已经做到让你们复制粘贴就能用

HTML

   

<el-form-item label="新密码" prop="cpPassword" style="margin-left: 13px;">
      <el-input v-model="supplierEx.cpPassword" :type="pwdType2" placeholder="请输入密码" @keyup.enter.native="login">
         <i slot="suffix" class="el-icon-view" @click="showPwd2"></i>
      </el-input>
   </el-form-item>

   <el-form-item label="确认密码" prop="cpConformPassword">
      <el-input v-model="supplierEx.cpConformPassword" :type="pwdType3" :placeholder="supplierEx.cpConformPassword" @keyup.enter.native="login">
         <i slot="suffix" class="el-icon-view" @click="showPwd3"></i>
      </el-input>
   </el-form-item>
   <el-form-item>
      <div class="rightArea" style="display: flex;margin-left: 62px;line-height: 40px;align-items: center;">
         <div class="margin_top10">
            <el-button type="primary" @click="submitForm('supplierEx')" style="background: #ED8413;border: #ED8413">确认</el-button>
         </div>
      </div>
   </el-form-item>
</el-form>

JS

  data: function () {

           var checkData1= (rule, value, callback)=> {
                if (value) {
                    if (/[\u4E00-\u9FA5]/g.test(value)) {
                        callback(new Error(isEnlish?'Password cannot enter Chinese characters':'密码不能输入汉字!'));
                    } else {
                        callback();
                    }
                }
                callback();
            }
            var checkData2= (rule, value, callback)=> {
                if (value) {
                    if (/[\u4E00-\u9FA5]/g.test(value)) {
                        callback(new Error(isEnlish?'Password cannot enter Chinese characters':'密码不能输入汉字!'));
                    } else {
                        callback();
                    }
                }
                callback();
            }

            var validate2 = (rule, value, callback) => {
                if (value === '') {

                    callback(new Error(isEnlish?'Please enter the password again':'请再次输入密码'))
                } else if (value !== this.supplierEx.cpPassword) {
                    callback(new Error(isEnlish?'The two passwords are not consistent':'两次输入密码不一致!'))
                } else {
                    callback()
                }
            }

            return {
                pwdType1:'password',
                pwdType2:'password',
                pwdType3:'password',
                supplierEx: {
//             以下
                    cpOldPassword: '',
                    cpPassword: '',
                    cpConformPassword:'',
                    pwdType: ''
                },
                value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                value4: '',
                rules: {
                    cpOldPassword: [
                        { required: true, validator: checkData1, trigger: 'blur' },
                        { min: 6, max: 20, message: '密码长度6-20个字符', trigger: 'blur' }
                    ],
                    cpPassword: [
                        { required: true, validator: checkData2, trigger: 'blur' },
                        { min: 6, max: 20, message: '密码长度6-20个字符', trigger: 'blur' }
                    ],
                    cpConformPassword: [
                        { required: true, validator: validate2, trigger: 'blur' },
                        { min: 6, max: 20, message: '密码长度6-20个字符', trigger: 'blur' }
                    ],
                }
            };
        },

methods: {
showPwd3 () {
    this.pwdType3 === 'password' ? this.pwdType3 = '' : this.pwdType3 = 'password';
    let e = document.getElementsByClassName('el-icon-view')[2];
    this.pwdType3 == '' ? e.setAttribute('style', 'color: #409EFF') : e.setAttribute('style', 'color: #c0c4cc');
},

},

思路：

眼睛图标处理

1：密码的明文和密文展示通过@click="showPwd3" ，判断pwdType3后设置ico图标颜色

输入内容的校验

2：表单必须加入 :rules="rules" ，在html中或者data中加入 rules: {}，其中内部内容的配置关键在于 validator: checkData1这个地方再次将校验逻辑指向var checkData1=处的处理，从而达到更加复杂的处理，实现项目需求