Angular输入框正则问题：禁止首空格+限制特殊字符

Hey there! Let's get this input validation sorted out. I see you've got specific rules in place, and your current setup is blocking all spaces—let's fix that while hitting every requirement you listed.

First, Let's Recap Your Rules Clearly #

• ❌ No leading spaces (first character can't be a space)
• ✅ Spaces are fully allowed after the first character
• ⚠️ Max 3 special characters (I’ll define these as non-alphanumeric/non-space characters, but you can tweak this definition later)

What’s Wrong With the Current Setup? #

Your existing regex ^[^-\s&</][ws-]*$ and directive logic have a few key issues:

1. The regex is built to match an entire string, but you’re using it to validate individual keystrokes. A single space will never match this full-string pattern, so it gets blocked everywhere.
2. There’s a typo: [ws-] should be [\w\s-] (you missed the backslashes for \w and \s).
3. Most importantly, your current code doesn’t track the number of special characters entered—we need to add that check to enforce the 3-limit rule.

The Fixed Solution #

Let’s update the directive to validate the entire input value (not just single keystrokes) and adjust the logic to meet all your rules.

Updated Angular Directive (app.js)

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive("regExInput", function(){
  "use strict";
  return {
    restrict: "A",
    link: function(scope, element, attrs){
      // Define what counts as a special character (adjust this regex to your needs)
      const specialCharRegex = /[^a-zA-Z0-9\s]/g;
      
      // Listen for input events (covers typing, pasting, dragging text, etc.)
      element.on('input', function() {
        let value = this.value;
        
        // Rule 1: Remove leading space if present
        if (value.startsWith(' ')) {
          this.value = value.trimStart();
          return;
        }
        
        // Rule 3: Limit special characters to 3
        const specialChars = value.match(specialCharRegex) || [];
        if (specialChars.length > 3) {
          // Keep only the first 3 special characters and valid non-special characters
          let specialCount = 0;
          this.value = value.split('').filter(char => {
            if (specialCharRegex.test(char)) {
              specialCount++;
              return specialCount <= 3;
            }
            return true;
          }).join('');
        }
      });
      
      // Optional: Immediate feedback for leading space
      element.on('keypress', function(event) {
        const key = String.fromCharCode(event.charCode || event.which);
        // Block space if input is empty
        if (this.value.length === 0 && key === ' ') {
          event.preventDefault();
        }
      });
    }
  };
});

Updated HTML

<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <p>INSane {{name}}!</p>
  <div>
    <input type="text" reg-ex-input placeholder="Try entering text here" />
  </div>
</body>
</html>

Key Changes Explained #

1. Leading Space Prevention: We check for leading spaces on the input event (to handle pasting) and block space keystrokes when the input is empty for instant feedback.
2. Allowed Spaces After First Character: We don’t block spaces once there’s at least one character in the input.
3. Special Character Limit: We use a regex to identify special characters, count them, and truncate the input if we exceed the 3-limit. Adjust specialCharRegex to match exactly what you consider a "special character" (e.g., add/remove symbols like & or <).
4. Robust Event Handling: The input event covers all ways the input can change—not just typing—so pasting or dragging text won’t bypass your rules.

Test These Scenarios to Verify #

• 🚫 Trying to type a space first: It’ll be blocked immediately.
• ✅ Typing "Hello world!": Works perfectly (space is allowed after the first character).
• ⚠️ Typing "Hey!@#$": The fourth special character ($) gets removed automatically.

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