vue+elementui的創(chuàng)建賬號設置密碼界面，需要輸入兩次之后自動比較密碼的一致性，應該怎么做？

代碼如下，希望兩個密碼輸入框失去焦點時自動進行比較，兩者不一致時，標紅提醒用戶：

        <el-form-item label="密碼" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model.trim="addUserFormData.password" placeholder="密碼"></el-input>
        </el-form-item>
        <el-form-item label="確認密碼" :label-width="formLabelWidth" prop="password_confirm">
          <el-input type="password" v-model.trim="addUserFormData.password_confirm" placeholder="確認密碼"></el-input>
        </el-form-item>

回答

編輯回答

遺莣

你這個問題的描述已經(jīng)給出答案了，在失去焦點的事件里去判斷兩個值是否相等，不相等的時候為兩個輸入框加上標紅處理

2018年3月30日 23:31

編輯回答

裸橙

看文檔呀

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <link rel="stylesheet" >
    <link rel="stylesheet" href="css/reset.css">
    </head>
    <body>
        <div id="app">
                <el-form :model="addUserFormData" ref="form" :rules="rules" label-width="80px">
            <el-form-item label="密碼"   prop="password">
                <el-input type="password" v-model.trim="addUserFormData.password" placeholder="密碼"></el-input>
              </el-form-item>
              <el-form-item label="確認密碼" prop="password_confirm">
                <el-input type="password" v-model.trim="addUserFormData.password_confirm" placeholder="確認密碼"></el-input>
              </el-form-item>
            </el-form>
        </div>
        
        <script src="vue.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script>
            var vm = new Vue({
                el:"#app",
                data(){                
                    var validatePass = (rule, value, callback) => {            
                            if (value === '') {
                                callback(new Error('請再次輸入密碼'));
                              } else if (value !== this.addUserFormData.password) {
                                callback(new Error('兩次輸入密碼不一致!'));
                              } else {
                                callback();
                              }
                      };
                      return{
                        addUserFormData:{
                        password:'',
                        password_confirm:''
                        },
                        rules:{
                            password_confirm:[
                                {validator: validatePass, trigger: 'blur' }
                            ]    
                        }
                      }
                }
            })
        </script>
    </body>
</html>

2017年6月10日 12:06