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">
//无参数g
var regx = /user\d/;
var str = "user1aaaaaaabuser223";
var r1 = regx.exec(str);
var r2 = regx.exec(str);
document.write("r1:" + r1 + " r2:" + r2 + "<br/>");
//参数g
var regx = /user\d/g;
var str = "user1aaaaaaabuser223";
var r1 = regx.exec(str);
var r2 = regx.exec(str);
document.write("r1:" + r1 + " r2:" + r2 + "<br/>");
//无参数i
var 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/>");
//参数i
var 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 元素