使用JS正则表达式实现用户名验证

当注册某网站用户名时，需要根据网站定义的规则来进行填写，比如：只能使用字母，数字以及下划线。

此规则适用正则表达式来定义

分析：

当用户输入的用户名不符合规则时，页面给出提示且不进行提交。

当用户输入的用户名符合规则时，页面提交给服务器。

 

实现：

1.当不符合规则时给出提示，使用css的display属性，当display设置为none，提示信息被隐藏。所以用户名输入错误时，将display设置为block显示给用户即可。

2.可以根据事件的返回值，来判断是否进行提交，当用户名不符合规则，即不提交，返回false即可。

上述实现使用一个事件来完成。

事件代码

function checkForm(){
            //1.定义正则
            var reg = /^[a-zA-Z0-9_-]{4,16}$/;
            
            //2.获取输入的用户名的内容(获取标签的value值)
            var username = document.getElementById("username").value;
            alert(username);
            //3.进行校验
            if (reg.test(username)) {
                return true;
            } else{
                //1.给出提示信息
                document.getElementById("namets").style.display = "block";
                //2.不提交
                return false;
            }
        }

注意：在标签中使用函数的返回值，需要加上return