目录
一、实验任务
1、当用户单击“注册”按钮时,读取用户的姓名、学号、性别、住址和爱好信息,然后使用确认消息对话框显示这些信息,并提示用户是否继续提交;如果继续,则对表单数据做如下检验、处理和提示。有确定和取消按钮。
2、检验用户名不能为空,清除用户名两端多余空格,最后向服务器提交去掉空格后的用户名。
3、密码必须为8位,且两次输入密码相同。
4、电话号码必须为11位数字,以1开头。
5、邮件地址中必须包含且只包含一个“@”符号,并且“@”不能是地址第一和最后一个字符。
二、JavaScript代码
function validate() {
/*
获取HTMLclass的方法:这里两种
1、使用document先获取表单的name,接着获取其他input的name
2、使用document通过name来直接获取getElementsByName()
*/
var user_name = document.regForm.user_name.value.trim();
var user_id = document.regForm.user_id.value.trim();
var user_sex = document.regForm.user_sex.value.trim();
var user_habit = document.getElementsByName("user_habit");
var user_address = document.regForm.user_address.value.trim();
var user_email = document.regForm.user_email.value.trim();
var user_pwd1 = document.regForm.user_pwd1.value.trim();
var user_pwd2 = document.regForm.user_pwd2.value.trim();
var user_tel = document.regForm.user_tel.value.trim();
/*
checkbox复选框获取value值的方法不同于其他input
可能有多个值,这里使用一个数组来装多个value的值
输出直接打印该数组即可
*/
var user_habit_Array = [];
for(k in user_habit){
if(user_habit[k].checked)
user_habit_Array.push(user_habit[k].value);
}
/*confirm函数会有两个按钮:确定+取消*/
confirm(
"姓名:"+user_name+"\n"+
"学号:"+user_id+"\n"+
"性别:"+user_sex+"\n"+
"地址:"+user_address+"\n"+
"爱好:"+user_habit_Array+"\n\n"+
"请核对以上信息是否正确?\n\n"+"单击'确定'继续,否则取消"
)
/*获得用户填写信息,在确认消息对话框中进行显示,并询问用户是否继续提交*/
var teltest = /^1\d{10}$/;
var email = /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
/*校验用户输入信息,合格则提交*/
if( user_pwd1.length != 8 ){
alert("密码长度必须为8位!")
}
else if( user_pwd1 != user_pwd2 ){
alert("两次输入密码不相同!")
}
else if( !teltest.test(user_tel) ){
alert("手机号必须为数字!")
}
else if( !email.test(user_email )){
alert("邮件格式不正确!")
}
}
三、实验截图
四、完整demo资源下载
版权声明:本文为weixin_45947938原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。