需求：为id=addchipnumber的输入框实现15位字符校验及错误提示

Got it, let's fix this validation issue for your input field. Below are practical solutions based on different tech stacks you might be using:

1. Vanilla JavaScript (No Frameworks) #

This works perfectly for static HTML pages with plain JS. First, set up your HTML structure with the input and an error message element (initially hidden):

<input type="text" id="addchipnumber" placeholder="Enter 15-digit number">
<div id="chipError" style="color: red; display: none;">Please enter exactly 15 characters</div>

Then add this JavaScript to handle validation as the user types:

const input = document.getElementById('addchipnumber');
const errorMsg = document.getElementById('chipError');

input.addEventListener('input', () => {
  // If you want to ignore whitespace, use input.value.trim().length instead
  if (input.value.length !== 15) {
    errorMsg.style.display = 'block';
  } else {
    errorMsg.style.display = 'none';
  }
});

If this input is part of a form, add submission validation to block invalid entries:

document.querySelector('form').addEventListener('submit', (e) => {
  if (input.value.length !== 15) {
    e.preventDefault();
    errorMsg.style.display = 'block';
  }
});

2. HTML5 Native Validation (Minimal JS) #

Use HTML5's built-in attributes for a lighter approach. The pattern attribute enforces the length, and we can style errors with CSS:

<form>
  <input 
    type="text" 
    id="addchipnumber" 
    placeholder="Enter 15-digit number"
    pattern=".{15}"
    title="Please enter exactly 15 characters"
    required
  >
  <button type="submit">Submit</button>
</form>

<style>
  input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: red;
  }
  /* Optional: Tweak the default browser validation bubble */
  input::-webkit-validation-bubble-message {
    color: red;
    font-size: 14px;
  }
</style>

Note: This relies on the browser's native UI, which varies slightly across browsers. For fully consistent styling, pair it with the vanilla JS snippet above.

3. Vue.js Solution #

If you're using Vue, leverage reactive state to track validation automatically:

<template>
  <div>
    <input 
      v-model="chipNumber" 
      id="addchipnumber" 
      placeholder="Enter 15-digit number"
    >
    <div v-if="isInvalid" style="color: red;">Please enter exactly 15 characters</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chipNumber: ''
    };
  },
  computed: {
    isInvalid() {
      // Use chipNumber.trim().length here if whitespace should be ignored
      return this.chipNumber.length !== 15;
    }
  }
};
</script>

4. React Solution #

For React, use state hooks to manage the input value and error state:

import { useState } from 'react';

function ChipInput() {
  const [chipNumber, setChipNumber] = useState('');
  const [showError, setShowError] = useState(false);

  const handleInputChange = (e) => {
    const value = e.target.value;
    setChipNumber(value);
    setShowError(value.length !== 15);
  };

  return (
    <div>
      <input
        id="addchipnumber"
        value={chipNumber}
        onChange={handleInputChange}
        placeholder="Enter 15-digit number"
      />
      {showError && <div style={{ color: 'red' }}>Please enter exactly 15 characters</div>}
    </div>
  );
}

export default ChipInput;

Quick Tip #

If leading/trailing spaces shouldn't count towards the 15 characters, adjust the length check to use input.value.trim().length !== 15 (modify accordingly for frameworks).

内容的提问来源于stack exchange，提问作者Lacon