Cannot enter a space

v-model.trim="value"
Copy the code

Two. Digit box calibration

Summarize the advantages and disadvantages of the three number forms
1). V – model. Number

Advantages:

  • You can use :min=”0″ : Max =”9999″ maxLength =”10″ Limit Maximum minimum value (bits) Disadvantages:
  • 12D can be verified, but DDDD cannot be verified
  • Shift can be used to input characters in Chinese
  • Cannot enter decimals
2) type = “number”

Advantages:

  • It will no longer be possible to enter characters in Chinese by pressing Shift
  • Can check 12D, also can check DDDD shortcomings:
  • The maximum and minimum values of input cannot be limited, that is, the maximum bits of input cannot be limited. Min and Max can only limit the size of increase and decrease hours
3). El – input – number

Advantages:

  • – Shift will no longer be able to input characters in Chinese (default value will be returned if focus is lost)
  • 12D can be verified, or DDDD can be verified (default is returned if focus is lost)
  • You can use :min=”0″ : Max =”9999″ maxLength =”10″
  • Limit decimal number :precision=”2″
  • There is a default value of 0 that cannot be removed

Three. The limitation of the number box

1. Enter only integers and limit the number of digits

1) el-input v-model.number can use maxlength=”10″ limit length
  • Note: V-model. number verifies 12D, but does not verify DDDD Add @blur=”changeDepreciation(‘zysupport’)”, or use @change=”changeDepreciation(‘depreciation’)”, the former is unable to enter characters, and the latter is empty when the focus is lost
<el-input v-model.number="ruleForm.zysupport" style="width:120px;" maxlength="10" @keyup.native="changeDepreciation('zysupport')" @blur="changeDepreciation('zysupport')"ChangeDepreciation (value) {this.ruleform [value] = this.ruleForm[value].toString().replace(/[^.\d]/g,' ')},Copy the code
2) el – input type = “number”
  • Note: :min=”1″ : Max =”54″ Set the maximum and minimum values of addition and subtraction
  • El-input type=”number” Will not be able to enter Chinese characters by pressing Shift
<el-input type="number" :min="1" :max="54" v-model="formData.expectedWeeks" placeholder="Please enter the number of weeks of pre-birth" size="small"></el-input>
Copy the code

Method of verification

      if(Number(expectedWeeks) < 1 || Number(expectedWeeks) > 54 || Number(expectedWeeks) ! == parseInt(Number(expectedWeeks))) { this.$message.warning(Please enter a positive integer between 1 and 54 weeks! ')
        return false
      }
Copy the code
3) el – input – number
  • Note: There is a default value of 0
<el-input-number v-model="ruleForm.jmsupport" :precision="2" :min="0" :max="9999999999"></el-input-number>
Copy the code

2. Integer or reserve two decimal digits

1) If there can be a default value of 0

Using the el – input – number

<el-input-number v-model="ruleForm.zysupport" :precision="2" :min="0" :max="9999999999"></el-input-number>

Copy the code
2) If there is no default value of 0
<el-input type="number" v-model="ruleForm.productPrice" :min="0" @keyup.native="decimalPlaces('productPrice')"></el-input> // Preserve decimalPlaces (value) {if (this.ruleForm[value].indexOf('. ') > 1) {/ / decimal enclosing ruleForm [value] = / ^ \ d + \.? \ d {1, 2} $/. The test (enclosing ruleForm [value])? This. RuleForm (value) : this.ruleForm[value].substr(0, this.ruleForm[value].length - 1) }else if(this.ruleForm[value] < 0) {// less than 0 this.ruleForm[value] = 0}else if(this.ruleForm[value].length > 10) {this.ruleForm[value] = this.ruleForm[value]. Substr (0, 10)}},Copy the code

Special characters cannot be entered in the input box

// Delete the special characters in the input boxexport const delSpecialParam = (value) => {
  return value.replace(/[\\`~!@# $% ^ & * () + = | {} :; _,. < > /? ~ \ -! @ # $%...... & * () - + | {} '] + / g, "")
}


Copy the code

Five. Limit the number of input digits

<el-input type="number" v-model="ruleForm.bulk" :min="0" @keyup.native="ruleForm.bulk=ruleForm.bulk.length > 2 ? RuleForm. Bulk. Substr (0, 2) : ruleForm. Bulk"></el-input>
Copy the code

Form validation problems using ElementUI

1) English prompt appears

Delete required for el-form-item

<el-form-item label="Is there an external link:" :label-width="formLabelWidth" prop="link">

link:[
       { required: true, message: 'Please select external links', trigger: 'blur'},]Copy the code

Trigger: triggered when ‘blur’ loses focus