黑马程序员-001用户登录界面功能的实现
----------------------Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
用javascrip实现登陆界面的部分功能，不过对于我这个初学者来说很多知识不够扎实的缺点彻底暴露了出来，所以为此实在纠结了好几个小时才把问题搞定，着实头痛了一把。
1：说用户名的判定，要求对字符串和字符的熟悉程度（精通JavaScript正则表达式的高手除外）其中主要涉及到的一些问题就是字符的判断，根据编码规则，字符按照固定的顺序排列，所以判断之时需要知道这些情况。我给出的程序如下，基本还算完整。
function checkUserName() {
var userName = document.getElementById("userName");
var username = userName.value;
if (username.length < 4 || username.length > 12) {
alert("字符数为4到12个，请正确输入")
return 0;
}
else {
if (username[0] >= 0 && username[0] <= 9) {
alert("首字母不能为数字！");
return 0;
}
else {
for (var i = 0; i < username.length; i++) {
var a = username[i];
if ((a >= 0 && a <= 9) || (a >= 'a' && a <= 'z') || (a >= 'A' && a <= 'Z') || a == '_') {
continue;
}
else {
alert("字符只能为数字、字母和下划线，请正确输入！");
return 0;
}
}
}
}
alert("用户名格式正确！");
return 1;
}
其次是密码的判断，很简短，没有难点，程序如下：
function checkpassWord() {
var passWord1 = document.getElementById("passWord1");
var password1 = passWord1.value;
if (password1.length <= 5) {
alert("密码必须大于5位");
return 0;
}
var passWord2 = document.getElementById("passWord2");
var password2 = passWord2.value;
if (password1 != password2) {
alert("两次密码不一致，请重新输入！");
return 0;
}
alert("密码输入正确");
return 1;
}
最后是邮箱的判断，最主要的就是substring的运用，以及字符位置的判断，尤其需要讲的是，我被卡在这里好长时间，首先是程序中，字符的长度我多次用了this.length导致长度一度判断错误，还有javascript中substring（）第二个参数是整个字符串到停止位置字符串的长度，和第一个参数的位置不一样，应该是加上一，与C#并不一样，C#中第二个参数则是分割后的长度。至于其他的一些小错误就不说了，都是些低级错误，暂且留在心里，以后注意。程序如下：
function checkAddress() {
var Address1 = document.getElementById("address1");
var Address2 = document.getElementById("address2");
var address1 = Address1.value;
var address2 = Address2.value;
if (address1.substring(address1.length - 4, address1.length) == '.com') {
for (var i = 1; i <= address1.length - 5; i++) {
if (address1[i] != '@') {
continue;
}
else {
alert('.com邮箱格式正确');
if (address2 == address1) {
alert("邮箱验证通过");
return 1;
}
else{
alert("两次输入不一致，请确认");
return 0;
}
}
}
alert("请检查邮箱格式");
return 0;
}
else if (address1.substring(address1.length - 3, address1.length) == '.cn') {
for (var i = 1; i <= address1.length - 4; i++) {
if (address1[i] != '@') {
continue;
}
else {
alert('.cn邮箱格式正确');
if (address2 == address1){
alert("邮箱验证通过");
return 1;
}
else{
alert("两次输入不一致，请确认");
return 0;
}
}
}
alert("请检查邮箱格式");
return 0;
}
else {
alert("请填写正确的邮箱地址");
return 0;
}
}
当然最后再加上一个总判断：
function result() {
if (checkUserName()==1 && checkpassWord()==1 && checkAddress()==1 ) {
alert("验证通过");
}
else {
alert("验证失败");
}
}
再加上HTML的body代码：
必填信息 登录名 (只能用英文、数字和下划线) 密码 (密码必须大于5位，区分大小写) 确认密码 邮件地址 确认邮件地址 提交" οnclick="result() " /> 重填" />
一个简单的登陆程序算是完成了，当然我们可以再加一些其他的功能，比如onfocus/onblur再比如邮箱判断的更完整一些，将主要的邮箱地址区域名全部列出，并且用户部分只能为字母和数字，这里我就不细数了。
----------------------Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------