1.表单校验种类

1.1对用户名进行判空

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

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

1.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><style type="text/css">table {border: 1px solid black;margin: auto;padding: 5px;}</style>
</head>
<body><div id="first"><form action="模板.html"><table><tr><td>用户名</td><td><input type="text" class="one"></td></tr><tr><td>密码</td><td><input type="text" class="two"></td></tr><tr><td>邮箱</td><td><input type="text" class="three"></td></tr><tr><td><input type="reset"></td><td><input type="button" class="button" value="提交"></td></tr></table></form></div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>function check() {//判断用户名是否为空var name = $(".one").val().trim(); // trim去除空格if (name == "") {alert("用户名不能为空");return false;}//判断密码是否大于6位var password = $(".two").val().trim();if (password.length < 6) {alert("密码不能小于6位");return false;}//邮箱中必须包含@var email = $(".three").val().trim();if (email.indexOf("@")==-1){alert("邮箱必须包含@");return false;}//用户名不能有数字for (var i = 0; i < name.length; i++){var str = name.substring(i,i+1);if (isNaN(str)==false){alert("用户名不能有数字");return false;}} return true;}$(function () {$(".button").click(function () {if (check() == true) {window.open("模板.html");}});});
</script>
</html>

2.焦点和文本框

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

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

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

<!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>Document</title><style type="text/css"></style>
</head>
<body><input type="text" id="one">
</body>
<script type="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正则表达式参数方法小例子

<!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>Document</title>
</head>
<body>
</body>
<script type="text/javascript">//无参数gvar regx = /user\d/;var str = "user1aaaaaaabuser223";var r1 = regx.exec(str);var r2 = regx.exec(str);document.write("r1:" + r1 + "    r2:" + r2 + "<br/>");//参数gvar regx = /user\d/g;var str = "user1aaaaaaabuser223";var r1 = regx.exec(str);var r2 = regx.exec(str);document.write("r1:" + r1 + "    r2:" + r2 + "<br/>");//无参数ivar regx = /user/;var str1 = "user";var str2 = "User";var str3 = "USER";var r1 = regx.test(str1);var r2 = regx.test(str2);var r3 = regx.test(str3);document.write("r1:" + r1 + "    r2:" + r2 + "    r3:" + r3 + "<br/>");//参数ivar regx = /user/i;var str1 = "user";var str2 = "User";var str3 = "USER";var r1 = regx.test(str1);var r2 = regx.test(str2);var r3 = regx.test(str3);document.write("r1:" + r1 + "    r2:" + r2 + "    r3:" + r3 + "<br/>");
</script>
</html>

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

<!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>Document</title>
</head>
<body><div id="base">输入框：<input type="text" onblur="numchecked()"></div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">//企业用户登录function numchecked() {var regx = /^\d{6}$/;var str = $("input").val().trim();if (regx.test(str) == false) {alert("密码必须为6位数字");return false;}}
</script>
</html>

符号	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除了数字之外的任何字符，等价于0-9
\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W	任何非单字字符，等价于a-zA-z0-9_
.	除了换行符之外的任意字符

{n}	匹配前一项n次
{n,}	匹配前一项n次，或者多次
{n,m}	匹配前一项至少n次，但是不能超过m次
*	匹配前一项0次或多次，等价于{0,}
+	匹配前一项1次或多次，等价于{1,}
？	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

方括号

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

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

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

元字符	描述
.	查找单个字符，除了换行和行结束符。
w	查找单词字符。
W	查找非单词字符。
d	查找数字。
D	查找非数字字符。
s	查找空白字符。
S	查找非空白字符。
b	查找位于单词的开头或结尾的匹配。
B	查找不处在单词的开头或结尾的匹配。
	查找 NUL 字符。
n	查找换行符。
f	查找换页符。
r	查找回车符。
t	查找制表符。
v	查找垂直制表符。
xxx	查找以八进制数 xxx 规定的字符。
xdd	查找以十六进制数 dd 规定的字符。
uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

FF: Firefox, IE: Internet Explorer

属性	描述	FF	IE
global	RegExp 对象是否具有标志 g。	1	4
ignoreCase	RegExp 对象是否具有标志 i。	1	4
lastIndex	一个整数，标示开始下一次匹配的字符位置。	1	4
multiline	RegExp 对象是否具有标志 m。	1	4
source	正则表达式的源文本。	1	4

RegExp 对象方法

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

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

FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。

4.表单选择

:image

匹配所有的图像

:input

匹配所有的的input、textarea、select和button 元素

前端jQuery表单验证相关推荐

12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示本地下载功能强大的表单验证插件很多,以前我们介绍过validati ...
JQuery 表单验证--jquery validation
jquery validation,表单验证控件官方地址 :http://jqueryvalidation.org/ jquery表单验证默认值校验规则 jquery表单验证默认的提示 1 &l ...
jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
php表单确认密码,jQuery表单验证之密码确认实例详解
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
jQuery 表单验证设置html(,jquery表单验证
如何用jquery进行表单验证 (1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载 (2)引入js (3)按照插 ...

前端jQuery表单验证

1.表单校验种类

2.焦点和文本框

3.正则表达式

3.1基本语法结构

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

4.表单选择

前端jQuery表单验证相关推荐

最新文章

热门文章