100字范文 > 前端jQuery表单验证

前端jQuery表单验证

时间：2021-04-16 08:07:27

相关推荐

前端jQuery表单验证

1.表单校验种类

1.1对用户名进行判空

1.2密码长度必须大于等于6个字符

1.3邮箱必须包含@特殊字符

1.4姓名中不能包含数字

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>验证</title><styletype="text/css">table{border:1pxsolidblack;margin:auto;padding:5px;}</style></head><body><divid="first"><formaction="模板.html"><table><tr><td>用户名</td><td><inputtype="text"class="one"></td></tr><tr><td>密码</td><td><inputtype="text"class="two"></td></tr><tr><td>邮箱</td><td><inputtype="text"class="three"></td></tr><tr><td><inputtype="reset"></td><td><inputtype="button"class="button"value="提交"></td></tr></table></form></div></body><scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script><script>functioncheck(){//判断用户名是否为空varname=$(".one").val().trim();//trim去除空格if(name==""){alert("用户名不能为空");returnfalse;}//判断密码是否大于6位varpassword=$(".two").val().trim();if(password.length<6){alert("密码不能小于6位");returnfalse;}//邮箱中必须包含@varemail=$(".three").val().trim();if(email.indexOf("@")==-1){alert("邮箱必须包含@");returnfalse;}//用户名不能有数字for(vari=0;i<name.length;i++){varstr=name.substring(i,i+1);if(isNaN(str)==false){alert("用户名不能有数字");returnfalse;}}returntrue;}$(function(){$(".button").click(function(){if(check()==true){window.open("模板.html");}});});</script></html>

2.焦点和文本框

2.1blur() 定义：从文本域中移开焦点

2.2focus() 定义：从文本域中设置焦点

2.3select() 定义：选取文本域中的内容,突出显示输入区域的内容

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><styletype="text/css"></style></head><body><inputtype="text"id="one"></body><scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script><script>$(function(){$("#one").select(function(){$(this).css("background","yellow");});$("#one").blur(function(){$(this).css("background","yellow");});$("#one").focus(function(){$(this).css("background","yellow");});});</script></html>

3.正则表达式

描述了一种字符串的匹配模式

3.1基本语法结构

var 变量名=/表达式/参数

中间的表达式是匹配的内容，参数是一些匹配规则

参数常用有：

i ：代表对大小写不敏感的匹配

g ：全局匹配

常用的方法是：

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

text() 检索字符串中指定的值，查看是否符合正则表达式，返回值为布尔类型

3.2正则表达式参数方法小例子

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body></body><scripttype="text/javascript">//无参数gvarregx=/user\d/;varstr="user1aaaaaaabuser223";varr1=regx.exec(str);varr2=regx.exec(str);document.write("r1:"+r1+"r2:"+r2+"<br/>");//参数gvarregx=/user\d/g;varstr="user1aaaaaaabuser223";varr1=regx.exec(str);varr2=regx.exec(str);document.write("r1:"+r1+"r2:"+r2+"<br/>");//无参数ivarregx=/user/;varstr1="user";varstr2="User";varstr3="USER";varr1=regx.test(str1);varr2=regx.test(str2);varr3=regx.test(str3);document.write("r1:"+r1+"r2:"+r2+"r3:"+r3+"<br/>");//参数ivarregx=/user/i;varstr1="user";varstr2="User";varstr3="USER";varr1=regx.test(str1);varr2=regx.test(str2);varr3=regx.test(str3);document.write("r1:"+r1+"r2:"+r2+"r3:"+r3+"<br/>");</script></html>

3.3正则表达式6位数字密码验证

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><divid="base">输入框：<inputtype="text"onblur="numchecked()"></div></body><scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script><scripttype="text/javascript">//企业用户登录functionnumchecked(){varregx=/^\d{6}$/;varstr=$("input").val().trim();if(regx.test(str)==false){alert("密码必须为6位数字");returnfalse;}}</script></html>

方括号

方括号用于查找某个范围内的字符：

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

量词

RegExp 对象属性

FF: Firefox, IE: Internet Explorer

RegExp 对象方法

FF: Firefox, IE: Internet Explorer

支持正则表达式的 String 对象的方法

FF: Firefox, IE: Internet Explorer