Vue 规则效验

<template>
  <div>
    <cus-modal
      ref="modal"
      title="编辑"
      @on-visible-change="onVisibleChange"
      @onOk="onOk"
      width="420">
      <Form ref="formValidate" :model="form" :label-width="120">
        <FormItem
          label="姓名"
          prop="name"
          :rules="{
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
          }"
        >
          <Input
            v-model="form.name"
            clearable
            style="width: 200px"
            placeholder="请输入姓名"
          ></Input>
        </FormItem>
        <FormItem
          label="年龄"
          prop= "age"
          :rules="{
            required: true,
            pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
            message: '年龄输入不合法',
          }"
        >
          <Input
            ref="ageInput"
            v-if="true"
            v-model="form.age"
            clearable
            style="width: 200px"
            placeholder="请输入年龄"
          ></Input>
        </FormItem>
        <FormItem label="性别">
            <RadioGroup v-model="form.sex">
                <Radio label="男">男</Radio>
                <Radio label="女">女</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem 
          label="手机号码"
          prop="phonenumber"
          clearable 
          :rules="{
            required: true,
            pattern: /^1[3456789]\d{9}$/, 
            message: '手机号码格式不正确', 
            trigger: 'blur'
          }"
          >
          <Input
            v-model="form.phonenumber"
            style="width: 200px"
            placeholder="请输入手机号码"
          />
        </FormItem>
        <FormItem 
          label="单位" 
          prop="unit">
          <Input
            v-model="form.unit"
            style="width: 200px"
            placeholder="请输入单位信息"
          />
        </FormItem>
        <FormItem 
          label="岗位信息" 
          prop="position">
          <Input
            v-model="form.position"
            style="width: 200px"
            placeholder="请输入岗位信息"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <div class="modal-footer">
          <cus-button size="small" class="mr_2" @onClick="onCancel"
            >取消</cus-button
          >
          <cus-button type="primary" size="small" @onClick="onOk">
            编辑
          </cus-button>
        </div>
      </div>
    </cus-modal>
  </div>
</template>

<script>
import { getUpdateUser } from "@/api/business/manager";

const form = {
  userId:"",
  age: "",
  name: "",
  sex: "",
  phonenumber: "",
  unit: "",
  position: "",
};

export default {
  name: "userModal",
  data() {
    return {
      form: form,
    };
  },
  mounted() { },
  methods: {
    onVisibleChange(v) {
      this.$refs["formValidate"].resetFields();
      // if (!v)
      // this.form = this.$cu.deepClone(form);
    },
    show(row) {
      this.loading = false;
      this.$refs["modal"].show = true;
      this.form = row;
      this.form = this.$cu.deepClone(row)
    },
    onOk() {
      console.log(this.$refs.ageInput.value)
      if (this.$refs.ageInput.value <= 0){
        console.log('值大于0')
      } else{
        this.$refs["formValidate"].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.form.userId) {
            this.getUpdateUserApi();
          }
        }
      });
      }
    },
    onCancel() {
      this.$refs["modal"].show = false;
      this.$parent.onInit();
    },
    // 编辑用户接口
    getUpdateUserApi() {
      return new Promise((resolve) => {
        getUpdateUser({
          userId: this.form.userId,
          name: this.form.name,
          age: this.form.age,
          sex: this.form.sex == '男' ? 1 : 0,
          phonenumber: this.form.phonenumber,
          unit: this.form.unit,
          position: this.form.position,
          }).then((res) => {
          if (res.retCode === 2000) {
            this.$Message.success("编辑成功");
            this.$refs["modal"].show = false;
            this.$parent.onInit();
            resolve();
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
.permission {
  height: 300px;
  width: 500px;
  border: 1px solid #dcdee2;
  overflow-y: auto;
  border-radius: 2px;
  padding: 0 0 0 10px;
}
</style>