[JavaScript知识库]VUE element-ui之输入框限制输入数字number类型及表单校验

步骤：

表单中：

<el-form ref="ruleForm" :model="form" :rules="rules">
          <el-form-item label="上级地区:" prop="region" :label-width="formLabelWidth">
            <el-cascader
              v-model="selectedOptions"
              :options="options"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="名称:" prop="name" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" style="width:199px" />
          </el-form-item>
          <el-form-item label="行政代码:" prop="code" :label-width="formLabelWidth">
            <el-input v-model.trim="form.code"
             oninput="value=value.replace(/^\.+|[^\d.]/g,'')" 
             tyle="width:199px" 
             @blur="salaryChange" 
             />
          </el-form-item>
        </el-form>
		<div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>

定义数据：

data() {
    return {
      form: { region: '' },
      rules: {
        code: [
          { required: true, message: '请输入行政代码', trigger: 'blur' }
        ]
      }
    }
  },

定义方法：

// 行政代码失焦
    salaryChange(e) { //失去焦点时将校验通过的值赋给input框
      console.log(`------------`, e)
      this.form.code = e.target.value
    },
    // 表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => { //重点是ref绑定必须一致
        if (valid) {
          alert('submit!')
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

看效果：