el-input 表單驗證數字

頁面
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
<el-form-item label="使用次數" prop="times">
            <el-col :span="3">    
                <el-input v-model.number="ruleForm.times" oninput="if(value.length>=2)value=value.slice(0,2)" size="small" style="width:160px;" clearable> <template slot="append">次</template>
            </el-col>
          </el-form-item>
</el-form>
script
var Main = {
    data() {
      return {
       ruleForm: {
          seal: '',
          out: false,
          date1: '',
          date2: '',
          date3: '',
          date4: '',
          times: 1,
          name: '',
          reason: ''
        },
 rules: {
         times: [
            { type: 'number', required: true, min: 1, max: 5,message: '使用次數 1 到 5 次之間,不可輸入非數字!', trigger: 'blur' }
          ]
        }

 methods: {
        
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章