element ui 表单输入框添加自定义验证规则

<el-form :model="ruleForm" 
         :rules="rules" ref="ruleForm" 
         label-width="80px" class="demo-ruleForm">
	<el-form-item label="性别" prop="gender">
		<el-input v-model.trim="ruleForm.gender" style="width: 210px"   
                  :disabled="inputDisable">
        </el-input>
	</el-form-item>
</el-form>
data() {
    ruleForm: {
       gender: ""
    },
    rules: {
       gender: [{ required: true, message: "请输入性别", trigger: "blur" },
                { validator: this.validateGender, trigger:"blur"}]
    }
}
methods: {
    validateGender(rule,value,callback) {
      let reg = /^(男|女){1}$/
      let flag = reg.test(value)
      if (!flag) {
        callback(new Error('请输入男或女'))
      } else {
        callback()
      }
    }
}

猜你喜欢

转载自blog.csdn.net/leraning_/article/details/128815748