第十一天前端jQuery正则表达式

最新推荐文章于 2022-06-22 16:08:02 发布

qq_40298829

最新推荐文章于 2022-06-22 16:08:02 发布

阅读量101

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_40298829/article/details/109347734

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

十五正则表达式

1.表单验证

减轻服务器压力

1.基本思路

获取表单元素

对数据进行判断

表单进行提交触发事件，对数据进行验证

2.实现

js οnsubmit=“return validate()”

jQuery $("*").click(function(){…})

blur() 失去焦点

focus() 得到焦点

select() 选中文本域的内容，突出显示输入区域的内容

<script language="javascript" src="../js/jquery-1.8.2.js"></script>
<script language="javascript">
//js进行验证
function validate(){
	if(mf.uname.value==""||mf.uname.value.length<4){
		alert("js用户名不能为空,且长度至少为 4 位!");
		mf.uname.focus(); //重新获得焦点
		return false;
	}
	if(mf.upass.value==""||mf.upass.value.length<6){
		alert("js密码不能为空,且长度至少为 6 位!");
		mf.upass.focus(); //重新获得焦点
		return false;
}
		return true;
}
//jQuery进行验证
$(function(){
	$("input[name='but1']").click(function(){
	var res=""; //保存错误提示信息
	if($("input[name='uname']").val()==""||$("input[name='uname']").val().length<4){
		res="jq用户名不能为空,且长度至少为 4 位!";
		alert(res);
		 $("input[name='uname']").focus()
		return false;
}
	if($("input[name='upass']").val()==""||$("input[name='upass']").val().length<6){
		res="jq密码不能为空,且长度至少为 6 位!";
		alert(res);
		$("input[name='upass']").focus()
		return false;
}
return true;
	});
	});
</script>
</script>
<body>
<h2>用户登录</h2>
<!--onsubmit="return validate();" -->
<form action="ok.html" method="post" name="mf" onsubmit="return validate1()">
用户名:<input name="uname" type="text" /><br/>
密码:<input type="password" name="upass"/><br/>
<!--onclick="return validate();"-->
<input type="submit" name="but1" value="登 录" />&nbsp;
<input type="reset" name="but2" value="取 消"/>
</form>
</body>

2.正则表达式

一些具有特定含义字符组成的字符

优化代码，简化书写，严谨验证

1.正则表达式的模式

**1.简单模式

var reg=/表达式/

只能表示具体的匹配例：var reg=/china/

2.函数实现

var reg=new RegExp(“pattern表达式”，“attributes附加参数”)

可以使用通配符表达更加抽象的规则模式且/^(开头)…$/结尾

例：var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

2.匹配方法

exec() 检索字符中是正则表达式的匹配

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

3.字符匹配

通配符

\d 0-9 \D 除0-9

\w 0-9,a-z，A-Z \W 除0-9，a-z，A-Z

\s 空白字符 \S 非空白字符(默认一次)

，所有字符(默认一次

自定义匹配符

[****]

4.次数匹配符

? 0次或1次

* 匹配0次或多次

+ 匹配0次或多次

{n} 匹配n次

{n,} 至少匹配n次

{n,m} 匹配n-m次

如不指定次数匹配符，默认出现一次

<script language="javascript" src="../js/jquery-1.8.2.js"></script>
<script language="javascript">
$(function(){
var s1="helloworldhello123 你好 hello";
var res=s1.match(/hello/g);
alert("数组的元素个数: "+res.length);

//2. 若用户名只能由数字、下划线、字母组成，且长度在 6-8 之间
$("input[name='but1']").click(function(){
	var res=""; //保存错误提示信息
	var $nm=$("input[name='uname']");
	var reg1=/^\w{6,8}$/;
	if(reg1.test($nm.val())==false){
		res="用户名只能由数字、下划线、字母组成，且长度在 6-8 之间!";
		alert(res);
		return false;
}
	return true;
});
});
</script>
<body>
<h2>用户登录</h2>
<form action="ok.html" method="post" name="mf">
用户名:<input name="uname" type="text" /><br/>
密码:<input type="password" name="upass"/><br/>
<input type="submit" name="but1" value="登 录"/>&nbsp;
<input type="reset" name="but2" value="取 消"/>
</form>
</body>

qq_40298829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十一天前端jQuery正则表达式

十五正则表达式1.表单验证减轻服务器压力1.基本思路获取表单元素对数据进行判断表单进行提交触发事件，对数据进行验证2.实现js οnsubmit=“return validate()”jQuery $("*").click(function(){…})blur() 失去焦点focus() 得到焦点select() 选中文本域的内容，突出显示输入区域的内容<script language="javascript" src="../js/jquery-1.8.2.js">&
复制链接

扫一扫