一、字符类匹配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function valid()
{
//第一种方式（建议）定义一个正则表达式，只能匹配单个字母a
//var reg = /^[a]$/;
//第二种方式定义一个正则表达式，只能匹配a,b,c单个字符
//var reg = new RegExp('^[abc]$');
//取反，除了含有 a、b或 c字母的串（包括单个字符） ，匹配其他任意单个字符
//var reg = new RegExp('^[^abc]$');
//表示从小a到z，大A到Z（并集）中任意的一位
//var reg = new RegExp('^[a-zA-Z]$');
//表示从小a到z，大A到Z，0-9（并集）中任意的一位
//var reg = new RegExp('^[a-zA-Z0-9]$');
//表示从小a到z，大A到Z，0-9，以及下划线（并集）中任意的一位
//var reg = new RegExp('^[a-zA-Z0-9_]$');
//表示从0-9，以及下划线（并集）中任意的一位
//var reg = new RegExp('^[0-9_]$');
//不带[],表示只有ab串合法
//var reg = new RegExp('^ab$');
//带[],表示a或b单个字符合法
var reg = new RegExp('^[ab]$');
var uname = document.getElementById('username').value;
if(reg.test(uname))
{
alert("合法");
}else
{
alert("不合法");
}
}
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username">
<input? value="点击" type="button" onclick="valid()">
</body>
</html>片
添加图片注释，不超过 140 字（可选）
二、元字符匹配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function valid()
{
//表示之匹配除换行符以外的任意单个字符
//var reg = new RegExp('^.$');
//注意：使用方式二，‘\’需要转义，所以建议使用方式一
//var reg = new RegExp('^\\w$');
//一位单词字符[a-zA-Z_0-9]
//var reg = /^\w$/;
//一位非单词字符
//var reg = /^\W$/;
//空字符[ \t\n\x0B\f\r]
//var reg = /^\s$/;
//非空字符
//var reg = /^\S$/;
//匹配一位数字
//var reg = /^\d$/;
//匹配一位非数字
var reg = /^\D$/;
var uname = document.getElementById('username').value;
if(reg.test(uname))
{
alert("合法");
}else
{
alert("不合法");
}
}
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username">
<input? value="点击" type="button" onclick="valid()">
</body>
</html>
添加图片注释，不超过 140 字（可选）
三、数量词
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function valid()
{
//匹配一位数字，该位数字可出现一次或一次也不出现
//var reg = /^\d?$/;
//匹配一位数字，该位数字可出现零次或多次
//var reg = /^\d*$/;
//匹配一位数字，该位数字可出现至少一次，可出现多次
//var reg = /^\d+$/;
//匹配一位数字，该位数字必须出现三次
//var reg = /^\d{3}$/;
//匹配一位数字，该位数字至少出现三次
//var reg = /^\d{3,}$/;
//匹配一位数字，该位数字只能出现三次到五次
//var reg = /^\d{3,5}$/;
//控制电话号0871-12345678
//使用()可以把一组字符统一控制数量，如下0871-可出现可不出现
var reg = /^(0871-)?\d{8}$/
var uname = document.getElementById('username').value;
if(reg.test(uname))
{
alert("合法");
}else
{
alert("不合法");
}
}
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username">
<input? value="点击" type="button" onclick="valid()">
</body>
</html>
此处不再一一演示，请自行测试！
四、字符转义
如果你想查找元字符本身的话，比如你查找.,或者*,就出现了问题：你没法指定它们，因为它们会被解释成其它的意思。这时你就必须使用\来取消这些字符的特殊意义。因此，你应该使用\.和\*。当然，要查找\本身，你也得用\\。
例如：www\.weiyuxuan\.cn 匹配 www.weiyuxuan.cn，c:\\windows 匹配 c:\windows。
注意：[]内的特殊字符不需要转义。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function valid()
{
//特殊的字符!$^&*()\+?.
//var reg = /^\.$/;
//特殊的字符在[]当中不需要转义
//var reg = /^[.]$/;
//注意'[',在[]也不需要转义，但建议添加‘/’加以区分
var reg = /^[[]$/;
var uname = document.getElementById('username').value;
if(reg.test(uname))
{
alert("合法");
}else
{
alert("不合法");
}
}
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username">
<input? value="点击" type="button" onclick="valid()">
</body>
</html>
此处不再一一演示，请自行测试！
五、匹配几种格式的电话号码
\(?0\d{2}[) -]?\d{8}$/
这个表达式可以匹配几种格式的电话号码，像(010)88886666，或022-22334455，或02912345678等。我们对它进行一些分析吧：首先是一个转义字符\(,它能出现0次或1次(?),然后是一个0，后面跟着2个数字(\d{2})，然后是)或-或空格中的一个，它出现1次或不出现(?)，最后是8个数字(\d{8})。不幸的是，它也能匹配010)12345678或(022-87654321这样的“不正确”的格式。怎么解决这个问题呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function valid()
{
//(010)88886666，或022-22334455，或02912345678
//下面的这种方法也能匹配`010)12345678`或`(022-87654321`这样的`“不正确”`的格式
//var reg = /^(\(?0\d{2}[) -]?\d{8})$/;
//方式一
//var reg = /^(\(0\d{2}\)\d{8})|(0\d{2}-\d{8})$/
//方式二，整体需要使用()
//var reg = /^((\(0\d{2}\))|(0\d{2}-?)\d{8})$/;
//测试(0**),如果使用|，我们需要使用()
var reg = /^((\(0\d{2}\))|(0\d{2}-?))$/
var uname = document.getElementById('username').value;
if(reg.test(uname))
{
alert("合法");
}else
{
alert("不合法");
}
}
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username">
<input? value="点击" type="button" onclick="valid()">
</body>
</html>