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();
        }
      }
    };