javascript - How to restrict the same character from being used consecutively? - Stack Overflow

admin管理员组

文章数量:1404767

I am trying to create a username input and I want to restrict the user's input onkeypress. The limit of characters that can be entered is 20 + 1 being the fixed prefix.

What I want to achieve is:

1. To restrict user input and accept only A-Z, 0-9, dash (-) and underscore (_). [Solved]
2. To prohibit the user to start their username with dash (-) or underscore (_). [Solved]
3. To prohibit the user to use dash (-) if they have used underscore (_) and the opposite. [Solved]
4. To allow the user to use a max of 3 dashes (-) or 3 underscores (_). [Dashes Solved]
5. To prohibit the user to use consecutive symbols like so (user___ or user--p, etc) [NEED HELP!]

What I can't seem to figure out is how to restrict the underscore (_) to 3 max and how to stop consecutive dashes (-) and underscores (_).

Any help and proper explanation would be greatly appreciated!

My HTML:

<form name = "RegForm" method="post" action="index.html" class="login">
    <input type="text" maxlength = "21" name="userID" id="userID"/>
</form>

My JavaScript:

var userID_textfield = document.forms.RegForm.userID;
userID_textfield.onkeypress = function(e) {

    // Invalid character list
    var prohibited = "!@#$%^&*()+=;:`~\|'?/.><, \"";
    // List of characters that can't be first
    var posRestricted = "-_0123456789";
    // List of characters that can't be used more than once
    var numRestricted = "-_";
    // Get the actual character string value
    var key = String.fromCharCode(e.which);

    /* Goal:
       Validate: Accept only a-z, 0-9, - and _ */  
    if (prohibited.indexOf(key) >= 0) {
        console.log('Invalid key pressed');     
        return false;
    }
    else {
        /* Goals:
           1. Validate: -, _ and 0-9 can't be first
           2. Validate: - and _ can't be last if the userID is 21 characters long */
        if ((posRestricted.indexOf(key) >= 0 && this.value === "@") || (numRestricted.indexOf(key) >= 0 && this.value.length === 20)) {
            console.log("Username can't start with a number, a dash (-) or an underscore (_)");
            return false;
        }
        /* Goals:
           1. Validate: - and _ can't be used more than once each
           2. Validate: if - exists _ can't be used and the opposite' */
        else if (numRestricted.indexOf(key) >= 0) {
            var numResValue = [0, 0];
            for (var a = 0; a < numRestricted.length; a++) {
                for (var b = 0; b < this.value.length; b++) {
                    if (this.value.charAt(b) === numRestricted[a]) {
                       numResValue[a] += 1;
                    }
                }
            }
            for (var c = 0; c <= numResValue.length; c++) {
                if (numResValue[c] < 3) {
                    if (this.value.indexOf(numRestricted.replace(key, "")) === -1) {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
                else {
                     return false;
                }
            }
        }
        else {
            return true;
        }
    } 
};

You can view the code in action here.

I am trying to create a username input and I want to restrict the user's input onkeypress. The limit of characters that can be entered is 20 + 1 being the fixed prefix.

What I want to achieve is:

1. To restrict user input and accept only A-Z, 0-9, dash (-) and underscore (_). [Solved]
2. To prohibit the user to start their username with dash (-) or underscore (_). [Solved]
3. To prohibit the user to use dash (-) if they have used underscore (_) and the opposite. [Solved]
4. To allow the user to use a max of 3 dashes (-) or 3 underscores (_). [Dashes Solved]
5. To prohibit the user to use consecutive symbols like so (user___ or user--p, etc) [NEED HELP!]

What I can't seem to figure out is how to restrict the underscore (_) to 3 max and how to stop consecutive dashes (-) and underscores (_).

Any help and proper explanation would be greatly appreciated!

My HTML:

<form name = "RegForm" method="post" action="index.html" class="login">
    <input type="text" maxlength = "21" name="userID" id="userID"/>
</form>

My JavaScript:

var userID_textfield = document.forms.RegForm.userID;
userID_textfield.onkeypress = function(e) {

    // Invalid character list
    var prohibited = "!@#$%^&*()+=;:`~\|'?/.><, \"";
    // List of characters that can't be first
    var posRestricted = "-_0123456789";
    // List of characters that can't be used more than once
    var numRestricted = "-_";
    // Get the actual character string value
    var key = String.fromCharCode(e.which);

    /* Goal:
       Validate: Accept only a-z, 0-9, - and _ */  
    if (prohibited.indexOf(key) >= 0) {
        console.log('Invalid key pressed');     
        return false;
    }
    else {
        /* Goals:
           1. Validate: -, _ and 0-9 can't be first
           2. Validate: - and _ can't be last if the userID is 21 characters long */
        if ((posRestricted.indexOf(key) >= 0 && this.value === "@") || (numRestricted.indexOf(key) >= 0 && this.value.length === 20)) {
            console.log("Username can't start with a number, a dash (-) or an underscore (_)");
            return false;
        }
        /* Goals:
           1. Validate: - and _ can't be used more than once each
           2. Validate: if - exists _ can't be used and the opposite' */
        else if (numRestricted.indexOf(key) >= 0) {
            var numResValue = [0, 0];
            for (var a = 0; a < numRestricted.length; a++) {
                for (var b = 0; b < this.value.length; b++) {
                    if (this.value.charAt(b) === numRestricted[a]) {
                       numResValue[a] += 1;
                    }
                }
            }
            for (var c = 0; c <= numResValue.length; c++) {
                if (numResValue[c] < 3) {
                    if (this.value.indexOf(numRestricted.replace(key, "")) === -1) {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
                else {
                     return false;
                }
            }
        }
        else {
            return true;
        }
    } 
};

You can view the code in action here.

• javascript
• html
• validation
• input

Share Improve this question Follow edited Jul 24, 2016 at 15:09 Angel Politis asked May 10, 2016 at 11:11 Angel PolitisAngel Politis 11.3k1515 gold badges5050 silver badges6767 bronze badges 3

• Is 5. only for - and _? Or all characters? – Arg0n Commented May 10, 2016 at 11:25
• It's for "-" and "_". The rest of the characters, except A-Z, 0-9, - and _ are disabled. – Angel Politis Commented May 10, 2016 at 11:29
• You can do it with regex or you can do by keeping the track of the last character at the string like s.charAt(s.length-1) and prohibiting the new one in the eventListener of your choice. – Redu Commented May 10, 2016 at 11:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

you can add this : (i updated the fiddle : https://jsfiddle/ck7f9t6x/5/)

    var lastKey = this.value.charAt(this.value.length-1);
          alert("lastKey = " + lastKey);
          if(lastKey == key){

            return false;
          }
          else{
          var numResValue = [0, 0];
          for (var a = 0; a < numRestricted.length; a++) {
            for (var b = 0; b < this.value.length; b++) {
              if (this.value.charAt(b) === numRestricted[a]) {
                numResValue[a] += 1;
              }
            }
    ...

}

you can write a function for this thing that will accept your string and will return true or false(for valid or not)

function checkConsecutive(string){
//break it to array
var a = string.split('');
//check for consecutive
for(i=0;i<a.length;i++){
if(a[i] == a[i+1]){
return true;
}else{
return false}
}
}

I know this is not a perfect solution but it can work.

See this JSFiddle

HTML

<input type="text" onkeypress="preventConsecutive(this, event)"/>

JavaScript

function preventConsecutive(el, evt) {
  if(el.value.length > 0) {
    var lastChar = el.value[el.value.length-1];
    if((lastChar === "-" && evt.keyCode === 45) || (lastChar === "_" && evt.keyCode === 95)) {
        evt.preventDefault();
        return;
    }
  }
}

本文标签： javascriptHow to restrict the same character from being used consecutivelyStack Overflow