怎样利用javascript生成一个注册页面？

Question

如题所述

Answer 1

方法如下：

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>}  

}