el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容

更新時間：2023年10月23日 10:57:02 作者：鶴渺

這篇文章主要給大家介紹了關(guān)于el-input輸入校驗不能為空格以及不能輸入全部為空的內(nèi)容的相關(guān)資料,el-input驗證規(guī)則主要是為了確保輸入的內(nèi)容符合特定的要求,需要的朋友可以參考下

應用場景：

輸入框的校驗太常見了，基本上常見的為：不能為空，不能輸入空格，和不能輸入全部為空的內(nèi)容。這里對這個進行記錄。

詳細開發(fā)：

針對三種情況進行分別展示：

 rules: {
      ResearchNO: [
        { required: true, message: '請輸入項目代碼', trigger: 'blur' },
        {
          required: true,
          transform: (value) => value && value.trim(),
          message: '項目代碼不能全部為空',
          trigger: 'blur'
        }
      ],
      Name: [
        //輸入為空
        { required: true, message: '請輸入項目名稱', trigger: 'blur' },
        {
          min: 1,
          max: 50,
          message: '長度在 1 到 50 個字符',
          trigger: 'blur'
        },
        //不能全部輸入空格
        {
          required: true,
          transform: (value) => value && value.trim(),
          message: '項目名稱不能全部為空',
          trigger: 'blur'
        }
      ]
    },

不能輸入全部空格，主要是這里起作用：

 {
          required: true,
          transform: (value) => value && value.trim(),
          message: '項目名稱不能全部為空',
          trigger: 'blur'
        }

還有不能輸入空格：v-model后面加上trim

 <el-form-item label="項目名稱" prop="Name">
          <el-input v-model.trim="projectInfo.Name" placeholder="請輸入項目名稱"></el-input>
        </el-form-item>

附：el-input 首尾不能為空格的校驗

我們在使用 input 輸入框時，大多不希望用戶在前后輸入空格，有沒有簡單的校驗方法呢，當然是有的。

<el-form :rules="rules" :model="form" label-width="80px">
    <el-form-item label="活動名稱" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
</el-form>

<script>
export default {
    data() {
        return {
            form: {
                name: ''
            },
            rules: {
                name: [
                        { required: true, message: '請輸入活動名稱', trigger: 'blur'},
                        { pattern: /^(?!\s+).*(?<!\s)$/,  message: '首尾不能為空格', trigger: 'blur' }
                ]
            }
        }
    }
}
</script>

效果如下：