JavaWeb 正则表达式&表单验证-CFANZ编程社区

正则表达式

什么是正则表达式
正则表达式:regular expression
正则表达式仅仅是用来处理字符串的，它的特长在于处理复杂的字符串。
正则表达的作用
1、通过正则表达式定义的模型(规则/模式)去验证某个字符串是否和模型匹配。
2、通过正则表达式定义的模型(规则/模式)去把和模型匹配的字符串找出来。
如何定义正则表达式
先看一个例子: var reg =/abcd/;这个叫做对象直接量的方式创建正则表达式
注意:在正则里出现的普通字符，就表示此字神本来的含意
再看一个例子: var reg = new RegExp("abcd’);叫做构造函数创建方式·
注意: var reg =//;这个不叫正则表达式，叫注释。
var reg = /xxx/，两个//之间必须要写东西，才叫正则表达式

<script type="text/javascript">
		var reg=/111 /;//在两个斜杠之间写内容叫做正则表达式
		var reg1=new RegExp('123');
	</script>

正则表达式的方法

var reg=/111 /;//在两个斜杠之间写内容叫做正则表达式
		var reg1=new RegExp('123');
		// 验证字符串是否符合规则的要求，正则表达式对象.test();
		var str="abc123456";
		console.log(reg1.test(str));//true
		console.log(reg1.exec(str).toString());

简单案例
元字符
任何字符在正则中除了有特殊意义的,其他的都是代表本身意思的普通字符。
但是，当给字母前面加上1 (1:表示转义字符)之后，这个字母就不是原来的字母了，它就表示特殊的含义了这个特殊的含义，就叫做元字符。

[]表示的是范围:
例子:[0-9]表示的是:0到9之间(包含)任意一个数字
正则表达式可以用"()至来进行分组，使表达式结构清晰。
\做为转意，即通常在"“后面的字符不按原来意义解释，如/d/匹配字符"d”，当d前面加了反斜杆后//d/，转意为匹配一个数字字符。
量词
贪婪模式非贪婪模式
只要在合法的情况下，它们会尽量多去匹配字符，这就叫做贪婪模式.
非贪婪匹配:如果我们希望正则尽量少地匹配字符,在量词的后边加问号?即可，组成如下的形式:
边界:^表示开始，$表示结束
^:匹配一个输入或一行的开头，表示开始，匹配紧跟在它后面的字符比如:/^a/匹配"“ab”"，而不匹配"“ba”
$:匹配一个输入或一行的结尾，表示结束，匹配紧跟在它前面的字符比如:/a$/匹配"“ca”"，而不匹配"“ac”"
分组
分组:量词会匹配紧挨着的单词，使用分组之后，就把(里面的单词作为整体来进行匹配。
|正则表达式中的或
把"|"左石两边的一到多个字符当成一个整体对待b|c表示，匹配b或者c(这里相当于[bc]).
ab |ac表示匹配ab或ac(但这里不相当于[abc]，[]表示在一组字符中任选一个)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		var reg=/111 /;//在两个斜杠之间写内容叫做正则表达式
		var reg1=new RegExp('123');
		// 验证字符串是否符合规则的要求，正则表达式对象.test();
		var str="abc123456";
		console.log(reg1.test(str));//true
		console.log(reg1.exec(str).toString());
		// 必须包含2位0-9的数字
		// var reg2=/[0-9][0-9]/;
		var reg2=new RegExp('\\d\\d');
		console.log(reg2.test(str));
		// 匹配字符串第一个非换行字符
		var reg3=/./;
		console.log(reg3.test(str));
		console.log(reg3.exec(str));
		// 包含0-9的至少1位的数字
		var reg4=/\d+/;
		console.log(reg4.test(str));
		//匹配一个连续出现10次的数字字符串
		var reg5=/\d{10}/;
		console.log(reg5.test(str));
		// 找到数字，出现3到8次
		var reg6=/\d{3,8}/;
		console.log(reg6.test(str));
		// 找到字符，出现2到4次
		var reg7=/\w{2,4}/;
		console.log(reg7.test(str));
		// 验证手机号
		// 11位数字，必须以1开头，第二位只能是 3，5，7，8，9
		var reg8=/^1[35789]\d{9}$/;
		
	</script>
	<body>
	</body>
</html>

表单提交和表单验证

什么是表单验证
如何进行表单验证
1、表单验证一般都结合is事件和函数，还有正则表达式综合运用。
2、表单验证的规则∶
action:提交表单到哪个地方去
method:表示表单提交的方式，一般都是Post方式
submit:提交表单，对应的需要使用onsubmit事件
onsubmit:一般都是在form标签上，会触发check()函数验证。还需要在check()函数前面写return
onsubmit需要接收check()函数的返回值:true/false
true:表单会提交
false:表单不提交
check()函数中的return true/ return false是必须要写的，表示是否提交成功!!!
案例

Json格式对象

什么是json
JSON 英文全称JavaScript Object Notation
JSON是一种轻量级的数据交换格式
JSON是独立的语言
JSON易于理解
JSON使用JavaScript语法，但是JSON格式仅仅是一个文本
文本可以被任何编程语言读取及作为数据格式传递
json的作用
JSON是用于存储和传输数据的格式。
JSON通常用于服务端向网页传递数据
语法：

{
	"属性名"："属性值",
	"属性名1"："属性值1",
	"属性名2"："属性值2",
	
}

JSON获取值
1、通过 json对象.属性名
2、通过json对象[“属性名”]：数组下标

在这里插入图片描述
省市级联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="pri"></select>
		<select id="city"></select>
	</body>
	<script type="text/javascript">
		function $(a){
			return document.getElementById(a);
		}
		//获取对象
		var pri=$("pri");
		var city=$("city");
		//json格式创建
		var json=[
			{
				"pname":"湖北省",
				"cname":["武汉市","黄冈市","宜昌市"]
			},
			{
				"pname":"广东省",
				"cname":["深圳市","广州市","惠州市"]
			}
		];
		//创建省级option
		
		for(var i=0;i<json.length;i++){
			console.log(json[i].pname);
			var op=document.createElement("option");
			op.innerHTML=json[i].pname;
			op.value=json[i].pname;
			pri.appendChild(op);
		}
		//创建市级
		pri.onchange=function(){
			city.length=0;
			for(var i=0;i<json[pri.selectedIndex].cname.length;i++){
				console.log(json[pri.selectedIndex].cname[i]);
				
				var op=document.createElement("option");
				op.innerHTML=json[pri.selectedIndex].cname[i];
				op.value=json[pri.selectedIndex].cname[i];
				city.appendChild(op);
			}
			
		}
	</script>
</html>