JavaScript实现表单验证

实现效果:

用户进行注册时能够对其输入的信息进行简单验证,逐行验证,若输入信息不符合规范,则在旁边显示错误提示。效果图图如下:(由于没有进行修饰,界面异常丑陋,但主要功能没问题)

JavaScript实现表单验证_第1张图片

实现思路:

1、使用form表单标签用于为用户输入创建 HTML 表单,使用input元素获取用户填写的数据。

2、制定相关的正则表达式,用DOM对象取出用户输入的相关数据与正则表达式进行比较验证。

3、最后用onsubmit和reset事件进行数据提交和重置。

代码展示:



	
		
		
	
	
	
		
1、请输入用户名:

用户名长度为6-18位,必须为字母或数字或下划线

2、请 输 入 密 码:

密码长度为6-12位,至少包含一位大写字母、一位小字母、一位数字

3、请再次输入密码:
4、请选择性别:
5、请输入邮箱:
6、请输入手机号码:

 

你可能感兴趣的:(JavaScript)