element自定義表單驗證

element-ui框架下修改密碼彈窗進行表單驗證。

除了基礎校驗，密碼不為空，長度不小於6字符，需求中還需校驗密碼由數字和字母組合。

處理代碼如下：

 <el-dialog :visible.sync="showDialog" :before-close="beforeClose" title="修改密碼" :close-on-click-modal="false" width="700px !important" center>
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="舊密碼" prop="oldpwd">
          <el-input v-model="form.oldpwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密碼" prop="newpwd">
          <el-input v-model="form.newpwd" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <span class="col-999">密碼由數字和字母組合,且長度不少於6</span>
        </el-form-item>
        <div class="dialog-footer mt20">
          <el-button type="primary" @click="onSubmit('form')">確定</el-button>
          <el-button @click="onCancle('form')">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

 rules: {
        newpwd: [
          { required: true, message: "請輸入新密碼", trigger: "blur" },
          { min: 6, message: "密碼長度不小於6個字符", trigger: "blur" },
         { validator: checkPwd, trigger: "blur" } // 自定義校驗
        ],
        oldpwd: [
          { required: true, message: "請輸入舊密碼", trigger: "blur" },
          { min: 6, message: "密碼長度不小於6個字符", trigger: "blur" }
        ]
      },

自定義校驗

在export default下 data方法中：

嘗試了多個正則，例如： /^[a-zA-Z0-9_]$/;   /[\W]/g等均無效~ 

最后取下面的。

 var checkPwd = (rule, value, callback) => {
      var reg = /^[a-zA-Z0-9]*(([a-zA-Z]+[0-9]+)|([0-9]+[a-zA-Z]+))[a-zA-Z0-9]*$/;
      if (value) {
        if (!reg.test(value)) {
          return callback(new Error("密碼必須由數字和字母組合成"));
        } else {
          callback();
        }
      }
    };