JQuery-表单验证

本章目标——

	1、掌握String对象的用法
	2、会使用表单选择器选择页面元素
	3、会使用正则表达式验证页面输入内容
	4、会使用HTML5的方式验证表单内容

1、认识表单（案例一）

	常用的表单——>表单验证思路——>为什么使用表单选择器

2、表单选择器

		表单
			:input 			匹配所有 input, textarea, select 和 button 元素
			:text 			匹配所有的单行文本框
			:password 		匹配所有密码框
			
			:radio 			匹配所有单选按钮
			:checkbox 		匹配所有复选框				
			
			:image 			匹配所有图像域
			:file 			匹配所有文件域
			
			:reset 			匹配所有重置按钮
			:button 		匹配所有按钮
			:submit 		匹配所有提交按钮
			
			:hidden 		匹配所有不可见元素，或者type为hidden的元素
			
			
		表单对象属性
			:enabled 		匹配所有可用元素
			:disabled 		匹配所有不可用元素
			:checked 		匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
			:selected 		匹配所有选中的option元素
	
		* 案例2： 需求，通过表单选择器，找到	selected  被选中的下拉菜单中的选项。
					
		表单选择器用法：通过表单属性值，来获取到表单的具体的内容。然后操作。

3、验证表单内容 （String 对象的用法）

				indextof(value)		返回参数字符串在，调用者字符串中出现的位置，如果不存在，返回-1
				subString(index1,index2)	
	
	String 类用于表单校验的方法：
	
	
		表单校验，搜索字符串中是否包含某个子字符串。
			js代码中，用indexOf()方法	参数传入一个子字符串，
										该方法返回子字符串第一次出现位置的所有
										如果不包含该子字符串，那么会返回 -1
			
			//java代码中，可以用contains()方法。	
		
		
			subString(n,m)	获取从n到m的子字符串。
			
			isNAN() 判断是否是非数字的方法，如果非数字，就返回true
					如果是数字，就返回false

4。表单校验特效

（1）通过value属性值提示

				获得焦点的时候，判断，如果是提示内容，就清空内容。
				失去焦点的时候，判断没有内容，就显示提示内容，又内容就不做处理。
			
			示例：
					邮箱：<input type="text" value="请输入正确邮箱内容">
				
					 $(function (){
					  //文本输入框的，获得焦点方法，触发函数
					  $(":text").focus(function (){
						//当获得焦点，把value值设置为空字符串，且设置边框样式。
						$(this).val("").css("border","2px solid red");
					  }).blur(function (){  //调用失去焦点的方法
						if ($(this).val()==""){
						  $(this).val("请输入正确的邮箱信息");
						}else{
						  $(this).css("border","2px double blue");
						}
					  })
					})

（2）文本输入提示特效 在输入框后面添加span标签用于提示输入内容是否合法

				示例： 邮箱：<input type="text" value=""> <span></span>
					<script>
						$(function () {
							$(":text").blur(function () {  //给文本输入框的失去焦点方法，触发回调函数
								var email = $(this).val();  //获取邮箱文本框中的value值
								if (email.indexOf(".") == -1) {
									$("span").html("输入的邮箱内容必须包含 . 符号").css("color", "red");
								}
								if (email.indexOf("@") == -1) {
									$("span").html("输入的邮箱内容必须包含 @ 符号").css("color", "red");
								}
								if (email == "") {
									$("span").html("输入的邮箱内容不能为空").css("color", "red");
								}
							})
						})
					</script>

5. 正则表达式

（1） 什么是正则表达式：

			就是具有特殊匹配规则的一串字符串。

（2）为什么需要正则表达式

			简洁的代码
			严谨的验证文本框中的内容

（3）定义正则表达式的两种方式：

			普通方式
				var reg=/表达式/附加参数

			构造函数
				var reg=new RegExp("表达式","附加参数");

（4）表达式匹配的模式

			简单模式
				只能表示具体的匹配 var reg=/china/;

（5）复合模式

			可以使用通配符表达更为抽象的规则模式
				var reg=/^\w+$/;

（6）注意事项：

 正则表达式包含^$和不写 ^$ 开始匹配结束字符串的区别
			-1- 没有写开始和结束匹 ^ $ 配符号的 : 
					要被验证的字符串，包含满足要求的子字符串即可。
			-2- 有开始和结束匹 ^ $ 配符号的 :
					必须严格匹配正则表达式的匹配规则

（7）正则表达式的方法：

			exec(要被匹配的字符串)
				找到满足匹配规则的字符串，返回出现索引位置
			test(要被匹配的字符串)
				判断是否有符合匹配规则的字符串，有返回true，否则false

（8）正则表达式符号

			-------------------匹配字符---------------------------
			/…/	代表一个模式的开始和结束
			^	匹配字符串的开始
			$	匹配字符串的结束
			\s	任何空白字符
			\S	任何非空白字符
			\d	匹配一个数字字符，等价于[0-9]
			\D	除了数字之外的任何字符，等价于[^0-9]
			\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
			\W	任何非单字字符，等价于[^a-zA-z0-9_]
			.	除了换行符之外的任意字符
			
			--------------------匹配数量---------------------------
			{n}	匹配前一项n次
			{n,}	匹配前一项n次，或者多次
			{n,m}	匹配前一项至少n次，但是不能超过m次
			*	匹配前一项0次或多次，等价于{0,}
			+	匹配前一项1次或多次，等价于{1,}
			？	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

（9）常见匹配要求：

			用户名匹配规则  首字母开头，数字字母组成4到16位
				var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
				
			密码匹配规则  4-10位字母数字组成
				var reg = /^[a-zA-Z0-9]{4,10}$/;
				
			邮箱匹配规则  
					非特殊符号的字符至少一位@.字母三位
					或者： 非特殊符号的字符至少一位@.字母2-3位.字母2-3位
				var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
				
			手机号匹配规则  1开头，且11位数字
				var regMobile = /^1\d{10}$/;
				
			出生日期匹配规则   
				生日的年份为1900～2016  例如1980-5-12或  1988-05-04"

			var reg = /^((19\d{2})|(200\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;

6 . html 5新特性，新增属性，表单校验用。

（1）三个属性：

		required ： (关键字)要求你必须满足的条件。强制符合下面的规则
		
		placeholder： 在文本框以灰色字体来显示，提示要输入内容的规范
						当你文本框输入内容的时候，提示消失。
		pattern: 	属性后面写正则表达式，来进行校验。
					符合规则，true，不符合规则，false

		html5新特性中，对邮箱校验，进行底层的封装，不需要我们来代码实现就可以直接用。

	
	使用示例：
			用户名的输入框校验
			<input type="text" id="uName" 
				placeholder="英文、数字长度为6-10个字符" 
				required 
				pattern="[a-zA-Z0-9]{6,10}"  />

（2）元素控件的validity属性，获取到 validityState对象

		通过validityState对象的一些属性 来判断当前的输入框输入内容进行校验

		valueMissing  
				填写了required特性的表单，
				没有写内容的话，valueMissing属性会返回true，否则返回false。
				
		typeMismatch  输入值与type类型不匹配  返回true ，匹配返回false

		patternMismatch   输入值与pattern特性的正则表达式不匹配，返回true ，匹配返回false

		tooLong  输入的内容超过了表单元素的maxLength 特性限定的字符长度。返回true

		rangeUnderflow  输入的值小于min特性的值。返回true

		rangeOverflow  输入的值大于max特性的值。

		stepMismatch	输入的值不符合step特性所推算出的规则

		customError  使用自定义的验证错误提示信息。
				使用setCustomValidity( )方法自定义错误提示信息：
				setCustomValidity(message)会把错误提示信息自定义为message此时customError属性值为true；
				setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。

（3）自定义设置H5新特性提示信息：

		setCustomValidity("提示内容")
		setCustomValidity("")会清除自定义的错误信息