Element 表单使用 数字类型

Element 表单使用 数字类型

01)  el-input 数字类型  和 el-input-number 计数器

02) 表单动态校验

<template>
  <div style="width: 400px">

    <el-form ref="form" :model="form" :rules="rules" label-width="70px">
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="form.age" placeholder="请输入年龄"/>
      </el-form-item>
    </el-form>

    <el-form ref="form2" :model="form2" :rules="rules2" label-width="70px">
      <el-form-item label="年龄2" prop="age">
        <el-input-number v-model="form2.age" placeholder="请输入年龄2"/>
      </el-form-item>
    </el-form>

    <div>
      <el-button type="primary" @click="submitForm()">提交</el-button>
      <el-button @click="resetForm()">重置</el-button>

      <el-button @click="addRules()">添加规则</el-button>
      <el-button @click="removeRules()">移除规则</el-button>
    </div>

  </div>
</template>
<script>

/* 这是ElementUI */
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import login from "../httpPage/login";
Vue.use(ElementUI);
/* 这是ElementUI */


export default {
  data() {
    return {
      form: {},  // 表单参数
      rules: {   // 表单校验
        age: [
          {required: true, message: "年龄不能为空", trigger: "blur"},
          {type: 'number', max: 99, message: '年龄必须为数字值,最大99'}
        ],
      },
      // 第二个表单
      form2: {},  // 表单参数
      rules2: { // 表单校验
        age: [
          {required: true, message: "年龄不能为空", trigger: "blur"},
          {type: 'number', max: 99, message: '年龄必须为数字值,最大99'}
        ],
      }
    }
  },
  methods: {
    submitForm() {
      console.log(this.form);
      this.$refs["form"].validate((valid)=>{
        console.log(valid);
      })
      this.$refs["form2"].validate((valid2)=>{
        console.log(valid2);
      })
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.$refs.form2.resetFields();

      this.form.age = '';
      this.form2.age = undefined;
    },
    removeRules() { // 移除规则
      this.$refs.form.clearValidate(["age"]);
      this.rules = {...this.rules, age: []}
    },
    addRules() { // 添加规则
      let age = [
        {required: true, message: "年龄不能为空", trigger: "blur"},
        {type: 'number', max: 99, message: '年龄必须为数字值,最大99'}
      ];
      this.rules = {...this.rules, age: age};
    }
  },
};
</script>

<style scoped>

</style>

 

 

官方地址:

数字类型验证    &&   InputNumber 计数器