方法如下:
function username() {
<span style="white-space:pre"> </span>var username = document.getElementById("username"); //得到账户的对象
<span style="white-space:pre"> </span>var usernameSpan = document.getElementById("usernameSpan"); //得到文本对象
<span style="white-space:pre"> </span>var pattern = /^[0-9a-zA-Z_]{6,16}$/;
<span style="white-space:pre"> </span>var userAgain = 0; //用来标记用户名是否存在,1为用户名不存在且输入正确
<span style="white-space:pre"> </span>username.onfocus = function() { //获得焦点时根据匹配成功与否修改span中的样式和内容
<span style="white-space:pre"> </span>if(!pattern.test(username.value)) { //如果获得焦点时输入不正确,重新调整样式
<span style="white-space:pre"> </span>spanValue(usernameSpan, "usernameSpan"); //修改提示语句
<span style="white-space:pre"> </span>changeFailingStyle(username, usernameSpan); //修改为匹配中并且失败的样式
<span style="white-space:pre"> </span>} else {//如果匹配成功但是用户名存在
<span style="white-space:pre"> </span>if(userAgain == 0) {
<span style="white-space:pre"> </span>spanValue(usernameSpan, "usernameAgain"); //修改提示语句
<span style="white-space:pre"> </span>changeFailingStyle(username, usernameSpan); //修改为匹配中并且失败的样式
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>username.onkeyup = function() { //输入内容是判断根据输入的值修改span中的样式和内容,使用up不是down,因为down读取时候有出入
<span style="white-space:pre"> </span>if(pattern.test(username.value)) { //匹配成功的话
<span style="white-space:pre"> </span>changeSucceedStyle(username, usernameSpan); //修改为匹配成功的样式
<span style="white-space:pre"> </span>if(!checkUsername(username.value + "username")) {//如果用户名存在
<span style="white-space:pre"> </span>spanValue(usernameSpan, "usernameAgain"); //修改提示语句
<span style="white-space:pre"> </span>changeFailingStyle(username, usernameSpan); //修改为匹配中并且失败的样式
<span style="white-space:pre"> </span>userAgain = 0; //修改为0
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span>userAgain = 1; //修改为1
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>} else { //匹配失败
<span style="white-space:pre"> </span>spanValue(usernameSpan, "usernameSpan"); //修改提示语句
<span style="white-space:pre"> </span>changeFailingStyle(username, usernameSpan);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>username.onblur = function() { //失去焦点时根据匹配成功与否修改span中的样式和内容
<span style="white-space:pre"> </span>if(pattern.test(username.value) && userAgain) { //匹配成功的话
<span style="white-space:pre"> </span>changeSucceedStyle(username, usernameSpan); //修改为成功的样式
<span style="white-space:pre"> </span>usernamenum = 1;
<span style="white-space:pre"> </span>} else { //匹配失败
<span style="white-space:pre"> </span>changeFailedStyle(username, usernameSpan); //修改为失败的样式
<span style="white-space:pre"> </span>usernamenum = 0;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
}
温馨提示:内容为网友见解,仅供参考