jQuery - 函数遍历及validation插件使用(表单校验).

本文链接：https://blog.csdn.net/qq_42986107/article/details/83352622

1.属性操作: val , text , html

val( ): 获取value属性的值.
val(…): 给value属性设置值.

text( ): 获取文本內容 , 如有标签 , 忽略不获取.
text(…):设置文本內容 , 如有标签 , 不进行解析 .

html( ): 获取html属性 , 如有标签 , 一并获取.
html(…):设置html属性 , 如果有标签 , 将进行解析.

注:
获取都是获取第一个.
设置是设置所有的.

2.函数遍历: each

方式1:
          $(“选择器”).each( function( index , ele ){
                    index: 正在被遍历的索引. 0开始.
                    ele == this: 正在被遍历的dom元素.
          });

 方式2:
       $.each($("选择器") , function(index,ele){
 
       });

3.文档操作:

内部插入:
       a.append(b):        将B插入到A内部后面.
       A.appendTo(B) :   将A插入到B内部后面
       A.prepend(B):       B插入到A内部前面.
       A.prependTo(B) :   A插入到B内部前面.
外部插入:
       a.after(b)                // a的后面插入b
       a.before(b)             // a的前面插入b
       b.insertAfter(b)       // a的后面插入b
       b.insertBefore(b)    // a的前面插入b
删除元素:
       remove      // 移除 .
       empty        // 清空

4.validation插件: 进行表单校验.

插件: 将封装好的一些js方法 ,解决某一个特定的应用. (表单) 导入:
       1.导入jquery库 ,
       2.导入validation库 ,
       3.国际化资源库(可导可不导)

使用前提:
       页面加载成功 - > 使用选择器选中校验的表单
       需要手动调用validate()方法!

$("选择器").validate({
			rules:{
   			    name属性值:规则名,
			    ...
            },
			messages:{
				name属性值:"提示信息",
				...
			}
});

5.自定义校验.

$.validater.addMethod( name , function( value , ele , params ) , msg );
name:规则名唯一不重复
fn:
       function(value,ele,params){
              value:代表当校验开始执行的时候输入框的值
              ele:代表当校验开始执行的时候输入框对象
              params:你使用该自定义规则的时候传规则参数
       }
       //编写校验规则
       //必须有一个bool返回值
msg:默认错误提示信息

01_省市联动案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		// 定义二维数组:
		var arr = new Array(4);
		arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
		arr[1] = new Array("长春市","吉林市","四平市","通化市");
		arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
		arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
		
	 	// 页面加载事件 . 
	 	$(function(){
	 		// 选项值 发生变化. 
	 		$("[name='pro']").change(function(){
	 			// alert(this.value)
	 			// 找到对应城市的数组. 
	 			var arrays = arr[$(this).val()]; 
	 			
	 			// 初始化值 .
	 			$("[name='city']").html("<option >-请选择-</option>")
	 			
	 			// 遍历数组. 
	 			$(arrays).each(function(){
	 				// alert(this)
	 				var name = this; 
	 				var option ="<option>"+name+"</option>"; 
	 				$("[name='city']").append(option); 
	 			})
	 		})
	 	})
	</script>
	<body>
		<form action="#" method="get">
			籍贯:
				<select name="pro">
					<option >-请选择-</option>
					<option value="0">黑龙江</option>
					<option value="1">吉林</option>
					<option value="2">辽宁</option>
					<option value="3">河南</option>
				</select>
				<select name="city">
					<option >-请选择-</option> 	
				</select>
			<br>
			<input type="submit" value="保存"/>
			<input type="reset" />
			<input type="button" value="普通按钮"/>
		</form>
	</body>
</html>

02_表单校验案例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单校验</title>
	</head>
	<!-- 导入js类库   -->
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
	<!-- 导入插件库   -->
	<script type="text/javascript" src="../js/jquery.validate.js" ></script>
	
	<style>
		.error{
			color: red;
		}
	</style>
	
	<script>
		$(function(){
			$("#formid").validate({
				rules:{
					username:{
						required:true, 
						rangelength:[2,6]
					},
					password:{
						number:true, 
						rangelength:[2,6]
					},
					repassword:{
						number:true, 
						equalTo:"[name='password']"
					},email:{
						required:true,
						email:"email"
					},sex:{
						required:true 
					}
					
				},
				messages:{
					username:{
						required:"用户名不能为空!", 
						rangelength:"长度必须在{0}~{1}之间"
					},
					password:{
						number:"密码只能为数字!", 
						rangelength:"密码必须在{0}~{1}之间"
					},
					repassword:{
						number:"密码只能为数字!", 
						equalTo:"必须和密码一致..."
					},email:{
						required:"邮箱不能为空!",
						email:"格式不正确..."
					},sex:{
						required:"必选!"
					}
					
					
				}
			});
		})
	</script>
	<body>
		<form action="#" method="get" id="formid">
			<table width="60%" height="60%"  align="center" bgcolor="#ffffff">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="80%"><input type="text" name="username" id="username"></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repassword" id="repassword"></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email" id="email"></td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男"> 男
						<input type="radio" name="sex" value="女" />女
						<label for="sex" class="error"></label>
					</td>
				
				</tr>
				<tr>
					<td>出生日期</td>
					<td>
						<input type="text" name="birthday">

					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkcode">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>