JavaScript表单验证表单验证

关于JavaScript表单验证

提示：以下是本篇文章正文内容，下面案例可供参考

一、 什么表单验证

表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了频率,提高了效率.

1. 一些常用的表单控件及其属性

		- 单行文本框 type='text'  
		- 密码框 type="password"
		- 单选框 radio
		- 复选框 checkbox
		- 按钮 type="button"  type="reset"  type="submit"   <button></button>
		- 下拉菜单 
			<select>
				<option></option>
			</select>
		- 文本域 <textarea></textarea>

表单中公共使用的一些属性

			disabled：设置或返回是否禁用表单元素。
				获取：	
					标签对象.disabled   返回值：true / false
				设置:
					标签对象.disabled = true / false

			id：设置或返回表单元素的 id 属性。
				获取：	
					标签对象.id 
				设置:
					标签对象.id = '值'

			name：设置或返回表单元素的 name 属性。注意：option 元素没有 name 属性。
				获取：	
					标签对象.name 
				设置:
					标签对象.name = '值'

			type：对输入元素可设置或返回 type 属性
				获取：	
					标签对象.type 
				设置:
					标签对象.type = '值'

			value：设置或返回表单元素的 value 属性。
				获取：	
					标签对象.value 
				设置:
					标签对象.value = '值'

其中 value 是非常重要的属性，也是在表单验证中经常用到的属性

特有的表单属性

			- 单行文本框和密码框的特有属性
				readOnly
				获取：	
					标签对象.readOnly   返回值：true / false
				设置:
					标签对象.readOnly = true / false

			- radio 和 checkbox 的私有属性：
				*** checked：设置或返回单选框或复选框的选中状态；
				获取：	
					标签对象.checked   返回值：true / false
				设置:
					标签对象.checked = true / false
			
			- select 元素的私有属性：
				length：返回选择列表中的选项数目；
					获取：
						标签对象.length 返回选项的数目。

				options：返回包含下拉列表中的所有选项的一个数组
					获取：	
						标签对象.options  返回值：选项对象集合

				selectedIndex:设置或返回下拉列表中被选项目的索引号
					获取：	
						标签对象.selectedIndex
						返回当前选中的选项的索引
					设置：
						标签对象.selectedIndex = 2;

			- option 元素的私有属性：
				selected：设置或返回 selected 属性的值；
					获取：	
						标签对象.selected   返回值： true / false
					设置：	
						course.options[1].selected = true

				text：设置或返回某个选项的纯文本值。

二、表单验证的数据分析

在表单验证中,我们通常使用如下的验证功能:

· 验证用户名与密码为指定格式

在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等

· 验证单选框所选内容

验证性别

· 验证多选框

如验证爱好等

· 验证邮箱
验证邮箱时是否为邮箱格式，是否添加@与符合标准的后缀名等

三、验证时所需的事件

		A. onfocus：元素获得焦点时触发
		B. onblur：元素失去焦点时触发
			这两个事件一般还是针对可输入的表单控件为主
			经常利用这两个事件去完成表单验证！

		C. onchange value改变事件
			对于可输入表单控件来说，onchange事件就是修改内容，然后失去焦点之后触发
			对于复选框和单选框来说，onchange监听的是他的选中与否！
			对于下拉菜单来说，当你切换选项时，触发onchange事件

		D. oninput 实时输入事件
			他可以监听可输入控件的实时输入事件

四、验证示例

先是页面结构，与需要验证的表单格式

	<div class="main">
		<!-- 11位数手机号 并且 全是数字 -->
		<form id="form">
			<div class="form-group">
				<input type="text" class="base" id="phone" name="phone" placeholder="请输入手机号" autocomplete="off">
				<div class="msg"></div>
			</div>
			<button class="btn">完成</button>
		</form>
		
	</div>

接下来是JavaScrip部分

    var phone = document.querySelector('#phone')
	var form = document.querySelector('#form')

	/*
		通过表单对象.name值，可以获取到对应的表单控件
	*/
	
	//  在onsubmit中完成表单验证、
	 var regPhone = /^1[3-9]\d{9}$/;   // 有关手机号的正则表达式
	 form.onsubmit = function(e){
	 	e.preventDefault();   // 取消浏览器的提交行为
	 	// 做表单验证
	 	// 1. 验证手机号
	 	var ts = '';
	 	if( regPhone.test(this.phone.value) ){   //test 方法检查字符串是否与给出的正则表达式模式相匹配，如果是则返回 true，否则就返回 false。
	 		this.phone.parentNode.className = "form-group success"
	 		ts = '验证通过'
	 	}else{
	 		this.phone.parentNode.className = "form-group error"
	 		ts = '请输入正确的手机号'
	 	}
	 	this.phone.nextElementSibling.innerHTML = ts;
	 	this.phone.nextElementSibling.style.display = 'block'
		
	 }