《JavaScript练习》之通过表单注册信息的获取、正则表达式验证密码、电话、邮件

目录

一、实验任务

二、JavaScript代码

三、实验截图

四、完整demo资源下载


一、实验任务

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资源下载

JavaScript表单练习.zip-网页制作文档类资源-CSDN下载1.掌握JavaScript脚本的调用和基本语法;2.掌握JavaScript常用内置对象的基更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_45947938/69577700


版权声明:本文为weixin_45947938原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。