快捷導(dǎo)航

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

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

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

應(yīng)用場景：

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

詳細(xì)開發(fā)：

針對(duì)三種情況進(jìn)行分別展示：

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

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

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

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

 <el-form-item label="項(xiàng)目名稱" prop="Name">
          <el-input v-model.trim="projectInfo.Name" placeholder="請(qǐng)輸入項(xiàng)目名稱"></el-input>
        </el-form-item>

附：el-input 首尾不能為空格的校驗(yàn)

我們在使用 input 輸入框時(shí)，大多不希望用戶在前后輸入空格，有沒有簡單的校驗(yàn)方法呢，當(dāng)然是有的。

<el-form :rules="rules" :model="form" label-width="80px">
    <el-form-item label="活動(dòng)名稱" 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: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur'},
                        { pattern: /^(?!\s+).*(?<!\s)$/,  message: '首尾不能為空格', trigger: 'blur' }
                ]
            }
        }
    }
}
</script>

效果如下：

總結(jié)/分析：

以上是記錄。

到此這篇關(guān)于el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容的文章就介紹到這了,更多相關(guān)el-input輸入校驗(yàn)不能為空內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: