当前位置: 首页>前端>正文

jQuery正则判断不属于特殊字符 jquery正则表达式验证

1.表单校验种类(重点)

1.对用户名进行判空
2.密码长度必须大于等于6个字符
3.邮箱必须包含@特殊字符
4.姓名中不能包含数字

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验种类(重点)</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	function check(){
		//1.对用户名进行判空
		var name = $("input[name=name]").val().trim();
		if(name==""){
			alert("用户名不能为空");
			return false;
		}
//注意有空格也不正确 加个trim()消除空格
//$.trim() 函数用于去除字符串两端的空白字符。
//$.trim() 函数将在 jQuery 3.5 及以上版本废弃,
//可以使用 JavaScript 原生的 String.prototype.trim 代替。

		//2.密码长度必须大于等于6个字符
		var password = $("input[name=password]").val().trim();
		if(password.length<6){
			alert("密码长度必须大于等于6个字符");
			return false;
		}

		//3.邮箱必须包含@特殊字符
		var email = $("input[name=email]").val();
		if(email.indexOf("@")==-1){
			alert("邮箱必须包含@特殊字符");
			return false;
		}
//JavaScript indexOf() 方法
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
//如果没有找到匹配的字符串则返回 -1。
//注意: indexOf() 方法区分大小写。

		//4.姓名中不能包含数字
		for(var i=0;i<name.length;i++){
			var j = name.substring(i,i+1);//左闭右开
			if(isNaN(j)==false){
				alert("姓名中不能包含数字");
				return false;
			}	
		}
		return true;
	}


	$(function(){
		$("#myform").submit(function(){
			return check();
		});
	});
</script>
</head>
<body>
	<form id="myform" action="demo01_success.html">
		<table border="1" align="center">
			<tr><td>用户名</td>
				<td><input type="text" name="name"/></td>
			</tr>
			<tr><td>密码</td>
				<td><input type="text" name="password"/></td>
			</tr>
			<tr><td>邮箱</td>
				<td><input type="text" name="email"/></td>
			</tr>
			<tr>
				<td><input type="submit" value="提交"/></td>
				<td><input type="reset" value="重置"/></td>
			</tr>
		</table>
	</form>
</body>
</html>

======================

demo01_success.html:123

jQuery正则判断不属于特殊字符 jquery正则表达式验证,jQuery正则判断不属于特殊字符 jquery正则表达式验证_jQuery正则判断不属于特殊字符,第1张

当你不写用户名,就会弹窗 用户名不能为空。
当你密码长度不够,就会弹窗 密码长度必须大于等于6个字符
当你邮箱不写@,就会弹窗 邮箱必须包含@特殊字符
当你姓名中包含数字,就会弹窗姓名中不能包含数字

jQuery submit() 方法
定义和用法
当提交表单时,会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

2.焦点和文本框
1.blur()

定义: 从文本域中移开焦点

2.focus()

定义: 从文本域中设置焦点

3.select()

定义: 选取文本域中的内容,突出显示输入区域的内容

案例:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript">
	$(function(){		
	123	/*
		$("#myinput").blur(function(){
			$(this).css("background","red");
		});
		$("#myinput").focus(function(){
			$(this).css("background","yellow");
		});
		$("#myinput").select(function(){
			$(this).css("background","blue");
		});*/
	});
</script>


<body><input type="text" value="" id="myinput" /></body>

jQuery正则判断不属于特殊字符 jquery正则表达式验证,jQuery正则判断不属于特殊字符 jquery正则表达式验证_javascript_02,第2张

点击文本框,变成黄色,松开变成红,
如果里面有内容并选中,就变成蓝色。
之后就一直是红色了。

jQuery正则判断不属于特殊字符 jquery正则表达式验证,jQuery正则判断不属于特殊字符 jquery正则表达式验证_正则表达式_03,第3张

3.正则表达式

(1)基本语法结构:(又称规则表达式)

正则表达式(regular expression)
描述了一种字符串匹配的模式(pattern),
可以用来检查一个串是否含有某种子串、
将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

var  reg = /表达式/附加参数

例如:var reg = /123/;  var reg = /123/g;

附注:

i: 执行对大小写不敏感的匹配

	g: 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止

(2)常用方法:

exec()  检索字符中是正则表达式的区配,返回找到的值,并确定其位置

test()   检索字符串中指定的值,返回true或false

案例1- 参数g:(没有$可以不用引入jQuery)

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript">
		/*第一种:无参数g的案例*/
        var regx=/user\d/;
        var str="user18duser2dsc";
        var rs=regx.exec(str);//此时rs的值为{user1}
        var rs2=regx.exec(str);//此时rs的值依然是{user1}
        document.write("rs:"+rs+"---rs2:"+rs2);

		/*第二种:有参数g的案例*/        
        var regx=/user\d/g;
        var str="user18duser2dsc";
        var rs=regx.exec(str);//此时rs的值为{user1}
        var rs2=regx.exec(str);//此时rs的值是{user2}
        document.write("rs:"+rs+"---rs2:"+rs2);
</script>

rs:user1—rs2:user1 rs:user1—rs2:user2

案例2- 参数i:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript">
        // 第一种无参数i
	    var regx=/abc/;
        var str = "ABC";
        var str2 = "abc";
        var flag = regx.test(str);
		document.write(flag); 
		//flase
        var flag2 = regx.test(str2);
        document.write(flag+" "+flag2); 
        //flase true

        // 第二种有参数i
        var regx=/abc/i;
// ==》转换为ABC 下面的字符串是不会变得
        var str = "ABC";
        var str2 = "abc";
        var flag = regx.test(str);
		document.write(flag);
		//true
        var flag2 = regx.test(str2);
        document.write(flag+" "+flag2); 
        //true true
	 
</script>


<body></body>

案例3 -常用写法:(企业专用)

jQuery正则判断不属于特殊字符 jquery正则表达式验证,jQuery正则判断不属于特殊字符 jquery正则表达式验证_jQuery正则判断不属于特殊字符_04,第4张

例 如:/^\d{6}$/

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script type="text/javascript">
	function checkEmail(){
		var reg = /^\d{6}$/;
		var email = $("#email").val();
		if(reg.test(email) == false){
			alert("请输入6位数字");
			return false;
		}
	}
</script>


<body>
	邮编:<input id="email" type="text"  onblur="checkEmail()"/>
	<div id="tip"></div>
</body>
</html>
<!-- onblur是失去焦点 HTML onblur 事件属性

jQuery正则判断不属于特殊字符 jquery正则表达式验证,jQuery正则判断不属于特殊字符 jquery正则表达式验证_jquery_05,第5张

jQuery正则判断不属于特殊字符 jquery正则表达式验证,jQuery正则判断不属于特殊字符 jquery正则表达式验证_正则表达式_06,第6张

4.表单选择器

(1):image

定义:匹配所有图像域

(2):input

定义:匹配所有input、textarea、select和button 元素

案例:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript">
	$(function(){
		//$(":image").css("background","red");
		//$(":input").css("background","red");
		alert($("select option:selected").val());//22
		// val()值获取的是value值
		alert($("select option:selected").text());//2
		// text()才是获得文本值
	});
</script>


<body>
<form>
  <input type="text" /><br/>
  <input type="checkbox" /><br/>
  <input type="radio" /><br/>
  <input type="image" /><br/>
  <input type="file" /><br/>
  <input type="submit" /><br/>
  <input type="reset" /><br/>
  <input type="password" /><br/>
  <input type="button" /><br/>
  <select>
  <option id="1" value="1">1</option>
  <option id="2" value="22" selected="selected">2</option>
  </select><br/>
  <textarea></textarea><br/>
  <button></button><br/>
</form>
</body>

第二个的结果是

jQuery正则判断不属于特殊字符 jquery正则表达式验证,jQuery正则判断不属于特殊字符 jquery正则表达式验证_jQuery正则判断不属于特殊字符_07,第7张

----2021.10.09&10.12



https://www.xamrdz.com/web/2c71957650.html

相关文章: