el-input 限制數據number類型 限制長度 函數判斷el-input內容寫法

1.限制input框數據類型

 

 復制代碼

<el-form-item label="排序" :label-width="formLabelWidth">

          <el-input

            v-model.number="forms.sort"

            autocomplete="off"

            type="text"

            :maxlength="10"

            oninput="this.value = this.value.replace(/[^0-9]/g, '');"

          />

   </el-form-item>

2.函數方式對應表單提交

 

 

 

 rules: {

        title: [

          { required: true, message: '請輸入規則名稱', trigger: 'blur' },

          { min: 0, max: 100, message: '長度在 0 到 100個字符', trigger: 'blur' }

        ],

        freight: [

          { required: true, message: '請輸入運費補貼', trigger: 'blur' },

          {

            type: 'number',

            message: '運費補貼需大於等於0小於100000',

            trigger: 'blur',

            transform(value) {

              if(value !== null && value !== '') {       //value  Input框內容

                if (String(value).trim() === '' || Number(value) < 0 || Number(value) >100000) {

                  return false

                }else{

                  return Number(value)

                }

              }else {

                return null

              }

            }

          }

        ]

      },

 //彈出框對應表單驗證方式

  submit(){

　　this.$ref.[from].validate((value)={

　　　　if(value){

　　　　let  phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/

　　　　　　if(!phoneReg.test(this.form.phone){

　　　　　　　　this.$message({

　　　　　　　　　　message:'請輸入真確的手機號碼'，

　　　　　　　　　　type:'warning'

　　　　　　　　})

　　　　　　　　return

　　　　　　}

　　　　　　//發送表單提交請求

　　　　}

})

}

//官網方式進行表單驗

1. export default {
2.  
   name:"",
3.  
   // 驗證手機 獲取三個回調函數
4.  
   let checkPhone = (rule, value, callback) => {
5.  
   let reg = /^1[345789]\d{9}$/
6.  
   if (!reg.test(value)) {
7.  
   callback( new Error('請輸入11位手機號'))
8.  
   } else {
9.  
   callback()
10.  
    }
11.  
    }
12.  
    return{
13.  
    rules: {
14.  
    phone: [
15.  
    { required: true, message: '請輸入手機號', trigger: 'blur' },
16.  
    { type: 'number', validator: checkPhone, message: '請輸入11位有效手機號號碼', trigger: ['blur', 'change'] }
17.  
     
18.  
    },
19.  
    }
20.