Jquery表单

常用表单操作

下面演示需要用到的HTML

<form action="https://www.baidu.com/" method="get" id="form_1">
			账号:<input type="text" name="name" value="hu" required="required" /><span id="name_span"></span>
			<br />
			密码:<input type="password" name="password" value="123" /><span id="password_span"></span>
			<br />
			再次输入密码:<input type="password" name="password" value="123" />
			<br>
			邮箱:<input type="email" name="email" value="qq@qq.com" />
			<br>
			正则表达式:<input type="text" id="name1" pattern="[A-Za-z]{3}"/>  
			<br>
			数字类型<input type="number" id="number_1" min="10" max="100"/>
			<br>
			<input type="radio" name="sex" value="man" checked="checked" />男
			<input type="radio" name="sex" value="she" />女
			<br />
			<input type="checkbox" name="hobby" value="游泳" checked="checked" />游泳
			<input type="checkbox" name="hobby" value="跑步" checked="checked" />跑步
			<input type="checkbox" name="hobby" value="跑步" id="a" />跳远
			<br />
			选择:
			<select name="select_1">
				<option value="1">1</option>
				<option selected="selected" value="2">2</option>
				<option value="3">3</option>
			</select>
			<br />
			文本域:<br />
			<textarea rows="5" name="textarea_1">
			xxxxxxxxxxxxxxxxx
			</textarea>
			<br />
			<input type="submit" value="提交" name="submit_1" />

		</form>

		<button id="but_1">BUTTON</button>

常用的一些表单 事件和方法

val() 可以获得和设置表单框内的文本 (带框的能输入的都可以 内联框除外)

$("input[name='name']").val("hu");     //设置
				var name_1=$("input[name='name']").val();   //获取
				console.log(name_1)

submit() 表单提交事件 如果返回 false 结束方法 停止表单提交

$("#form_1").submit(function(){ 
    // 在提交前进行的 处理 代码
    return true;  //返回false 停止提交
})

通过其他按钮click事件内使用submit()来主动触发表单提交

$("#but_1").click(function(){
					$("#form_1").submit()
				})

还可以通过click() 来触发subimt提交按钮

$("#but_1").click(function(){
					$("input[type='submit']").click()
				})

focus(); // 聚焦方法

$("input[name='name']").focus(function(){
					alert("你选中name了")
				})

我们还可以主动聚焦 比如表单提交时候如果有表单为空的 那么我们就聚焦到哪里

$("#form_1").submit(function() {	
				var name=$("input[name='name']").val();
				var password=$("input[name='password']").val()
				if(name.trim()==""){
					$("input[name='name']").focus()
					return false;
				}
				if(password.trim()==""){
					$("input[name='password']").focus()
					return false;
				}
				
				return true;
			})

select(); // 选中方法

监听表单选中 然后打印选择内容

$("input").select(function(e){
				console.log(e.target.value)
			})

获取单选按钮 被选中的值

var sexarr=$("input[name='sex']")
				 for (var i=0 ;i<sexarr.length;i++){
					   if(sexarr[i].checked==true){
						   console.log(sexarr[i].value)
					   }
				}

获取多选按钮 被选中的值

var hobbyarr=$("input[name='hobby']")
				 for (var i=0 ;i<hobbyarr.length;i++){
					   if(hobbyarr[i].checked==true){
						   console.log(hobbyarr[i].value)
					   }
				}

设置单选或者多选 按钮是否被选中

$(this).prop(‘checked’,true) //选中

$(this).prop(‘checked’,false) //取消选中

取消男选中 设置女为选中

var sexarr=$("input[name='sex']")
				 for (var i=0 ;i<sexarr.length;i++){
					 //取消男选中
					   if(sexarr[i].checked==true){
						   $(sexarr[i]).prop('checked',false)  //取消选中
					   }
					   
					   //设置女为选中
					   if(sexarr[i].checked!==true){
							if(sexarr[i].value=="she"){
								  $(sexarr[i]).prop('checked',true)  //设置选中
							}
						
						}
				}

将多选按钮中没有被选中 的 设置为选中

$("input[name='hobby']").each(function(){
			var che =$(this).get(0).checked
			if(che!==true){
				//设置 选中
				$(this).prop('checked',true)
			}			 
			 
		 })

取消指定多选按钮中的选中

$("input[name='hobby']").each(function(){
			var che =$(this).get(0).checked
			if(che===true){
				if($(this).val()==="游泳"){
					//取消选中
					$(this).prop('checked',false)
				}	
			
			}			 
		 })

获取select选择框被选的value

var select=$("select[name='select_1'] option:selected").val();
				console.log(select)

这种方式也行

var len = $("select[name='select_1']")  
	        for (var i=0;i<len.length;i++){
	            console.log($("#form_1 select")[i].value)  //遍历元素的值
	        }

表单验证

HTML自带的表单验证属性

placeholder 表单输入提示 输入内容后消失
用户名:<input type=“text” id=“name1” placeholder=“表单提示”/>

required 表单提交时 内容不能为空

用户名:<input type=“text” id=“name1” required=“required”/>

pattern 加入正则表达式语句 提交时不符合正则表达式 就会弹出提示 阻止提交

用户名:<input type=“text” id=“name1” pattern="[A-Za-z]{3}"/> 必须是字母 3个

邮箱简单的 验证

$("#form_1").submit(function() {
				var em = $("#form_1 input[name='name']").val();
				if (em == "") {
					alert("不能为空")
					return false;
				}

				if (em.indexOf("@") == -1) {
					alert("Email 格式不正确 必须包含@");
					return false;
				}

				if (em.indexOf(".") == -1) {
					alert("Email 格式不正确必须包含 点")
					return false;
				}
				return true;

			})

验证姓名不能为数字

$("#form_1").submit(function() {
				var name = $("#form_1 input[name='name']").val();
				for (var i = 0; i < name.length; i++) {
					var j = name.substring(i, i + 1);
					//是 数字返回 false 不是数字 返回 true
					if (isNaN(j) == false) {
						alert("姓名中不能包含数字")
						return false;
					}
				}
				return true;

			})

当输入格式有误时候 内容全部选中

$("#form_1").submit(function() {
				var mail=$("input[name='name']").val();
				if (mail.indexOf("@") == -1 || mail.indexOf(".") == -1) {
					alert("格式不正确")
					$("input[name='name']").select();
					return false;

				}
				return true;
			})

自定义验证提示信息

$("#form_1").submit(function() {
				var pd = true;

				var name = $("input[name='name']").val();
				if (name == "") {
					$("#name_span").css({
						"font-size": "13px",
						"color": "darkgray"
					});
					$("#name_span").html("用户名不能为空")
					pd = false;
				}
					var pass0 = $("input[name='password']:eq(0)").val();
					var pass1 = $("input[name='password']:eq(1)").val();
				if (pass0.trim()== "") {
					$("#password_span").css({
						"font-size": "13px",
						"color": "darkgray"
					});
					$("#password_span").html("密码不能为空")
					pd = false;
				}else if(pass0 != pass1){
					$("#password_span").css({
						"font-size": "13px",
						"color": "darkgray"
					});
					$("#password_span").html("两次输入的密码不对")
					pd = false;
				}

	
				return pd;

			})

更换表单的默认提示消息

因为更换表单的消息提示是javaScript 对象的方法所以需要用 javaScript的选择器

但是用jQuery也可以 需要转javaScript

注意只能用于表单 如Click 或者 change事件 才能验证 其他的事件没效果 别再submit事件中使用无效

更换 required=“required” 不能为空的属性 默认的提示信息

$("input[name='submit_1']").click(function() {
						//更换为空 的消息
						var name = document.getElementsByName("name")[0];

						if (name.validity.valueMissing == true) {
							//更改提示消息
							name.setCustomValidity("姓名不能为空")
						} else {
							//清空提示消息内容
							name.setCustomValidity("");
						}
					})

在表单中 type="?" 中有的属性时自带验证的 比如邮箱类型 如果格式不正确就会触发默认的提醒信息

$("input[name='submit_1']").click(function() {
					
							//更换 输入类型 和 定义的type类型 不匹配 提示消息
							//比如 邮箱类型 没有安邮箱类型输入 就会 触发
							var b=document.getElementsByName("email")[0]
							if(b.validity.typeMismatch==true){
								//更改提示消息
								b.setCustomValidity("邮箱格式不正确")
							}else{
								//清空提示消息内容
								b.setCustomValidity("");
							}	
					
					})

pattern属性 正则表达式 验证失败 默认提醒信息

$("input[name='submit_1']").click(function() {
					//正则表达式 验证失败 消息 更改
							var d=document.getElementById("name1")	
							if(d.validity.patternMismatch==true){
								//更改提示消息
								d.setCustomValidity("内容和表达式不匹配!!!")
							}else{
								//清空提示消息内容
								d.setCustomValidity("");
					}	
						
					})

type=“number” 类型 修改默认提醒信息

$("input[name='submit_1']").click(function() {
				//验证 输入的数 过小 或过大 的消息信息 更换
					var c=document.getElementById("number_1");
		
						if(c.validity.rangeUnderflow==true){
								//更改提示消息
								c.setCustomValidity("太小了")
							}else if(c.validity.rangeOverflow==true){
								c.setCustomValidity("太大了")
			
							}else if(c.validity.stepMismatch==true){
								c.setCustomValidity("倍数不够")
							}
			
							else{
								//清空提示消息内容
								c.setCustomValidity("");
			
							}	
						
					})

修改原生HTML的SELECT展示方式